Cursor CSS interaction with Buttons

Question

I'm trying to make a webpage with custom cursor, and it's working fine except when I mouse over buttons - how do I change this so that the custom cursor doesn't do this?

body, html {
  cursor: url(cursor.gif), pointer;
}

<body align="center">
  <h2>Click this button!</h2>
  <button onclick="location.href='/ever';">Click Me!</button>
</body>

score 1 · Answer 1 · answered Jun 13 '18 at 10:03

1

Simple solution for the question could be :

button {
    cursor: inherit;
}

answered Jun 13 '18 at 10:03

Keren Caelen

1,466
3
17
38

score 0 · Answer 2 · answered Jun 13 '18 at 10:03

0

I think you're looking for this:

button {
    cursor: inherit;
}

answered Jun 13 '18 at 10:03

Fab

4,526
2
21
45

Nikhil Aggarwal · Answer 3 · 2018-06-13T10:17:40.807

Browser has some default styles for various elements. Default style for button has cursor set to default. As it is being more specific style, it takes the precedence. Hence, you need to override the same for it. You can try like following

:hover {cursor: pointer;}

<div>test</div>
<button>test</button>
<input type="button" value ="Click"/>

Note, adding the :hover selector, will apply changes for every element. In case you have a different requirement, then you will have to specify the elements in the css accordingly.

Cursor CSS interaction with Buttons

3 Answers3