Search code examples
cssmouse-cursor

Applying cursor:pointer with button vs button:hover


I was wondering whether using button {cursor: pointer} has some downsides or reasons not to do it instead of button:hover {cursor: pointer}?

I feel really dirty typing button instead of button:hover, so I want to make sure I'm not doing anything bad.


Solution

  • There is no real difference between the two and no problems that could come to mind. If you load up the HTML below, you can see that even if there's a hover effect used the cursor change to a pointer exactly the same as if it didn't use a transition (which is the only effect I could imagine it having). If you prefer to use :hover then you can; however it is good practice to minimise the code you write in anything.

      <html>
    
    <head>
        <title>Pointer</title>
    </head>
    
    <body>
    
        <button class="pointer">Pointer</button>
        <button class="hoverPointer">Hover Pointer</button>
    </body>
    
    <style>
        .pointer {
            cursor: pointer;
        }
    
        .hoverPointer:hover {
            -webkit-transition: 2s;
            transition: 2s;
            cursor: pointer;
            background-color: aqua;
        }
    
    </style>
    
    </html>