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;
}
This question is related to
css
mouse-cursor
All u need is just use one of the attribute of CSS , which is---->
cursor:pointer
just use this property in css , no matter its inline or internal or external
for example(for inline css)
<form>
<input type="submit" style= "cursor:pointer" value="Button" name="Button">
</form>
Just add this style:
cursor: pointer;
The reason it's not happening by default is because most browsers reserve the pointer for links only (and maybe a couple other things I'm forgetting, but typically not <button>
s).
More on the cursor
property: https://developer.mozilla.org/en/CSS/cursor
I usually apply this to <button>
and <label>
by default.
NOTE: I just caught this:
the button tags have an id of
#more
It's very important that each element has it's own unique id
, you cannot have duplicates. Use the class
attribute instead, and change your selector from #more
to .more
. This is actually quite a common mistake that is the cause of many problems and questions asked here. The earlier you learn how to use id
, the better.
#more {
background:none;
border:none;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
cursor: pointer;
}
Source: Stackoverflow.com