Vladimir Litovkin Vladimir Litovkin - 1 month ago 5x
CSS Question

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
instead of
, so I want to make sure I'm not doing anything bad.


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.




    <button class="pointer">Pointer</button>
    <button class="hoverPointer">Hover Pointer</button>

    .pointer {
        cursor: pointer;

    .hoverPointer:hover {
        -webkit-transition: 2s;
        transition: 2s;
        cursor: pointer;
        background-color: aqua;