How to get the cursor to change to the hand when hovering a <button> tag

Question

When viewing my site, the cursor only changes to the gloved hand for <a> tags, not <button> tags. Is there a reason for this?

Here is my code (the button tags have an id of #more in css3).

 #more {     background:none;     border:none;     color:#FFF;     font-family:Verdana, Geneva, sans-serif; } 

Answer 1

see: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

so you need to add: cursor:pointer;

In your case use:

#more {   background:none;   border:none;   color:#FFF;   font-family:Verdana, Geneva, sans-serif;   cursor:pointer; } 

This will apply the curser to the element with the ID "more" (can be only used once). So in your HTML use

<input type="button" id="more" /> 

If you want to apply this to more than one button then you have more than one possibility:

using CLASS

.more {   background:none;   border:none;   color:#FFF;   font-family:Verdana, Geneva, sans-serif;   cursor:pointer; } 

and in your HTML use

<input type="button" class="more" value="first" /> <input type="button" class="more" value="second" /> 

or apply to a html context:

input[type=button] {   background:none;   border:none;   color:#FFF;   font-family:Verdana, Geneva, sans-serif;   cursor:pointer; } 

and in your HTML use

<input type="button" value="first" /> <input type="button" value="second" />