Question

I want to try to simulate a button with HTML5 and CSS3.

This is my CSS style:

.shiny-btn {
    background-color: #CE401C;
    border: thin solid #882D13;
    border-radius: 0.7em 0.7em 0.7em 0.7em;
    box-shadow: 2px 2px 2px #BBBBBB;
    color: #FFFFFF;
    padding: 0.5em;
    text-shadow: 1px 1px 1px #000000;
    width: 15em;
}

And this is my HTML5 code:

<a id="spanishButton" class="shiny-btn" onclick="setLanguage('spanish');">Spanish</a>

Why I can’t see a hand cursor button if I’m using <a> tag?

Answer 1

You need to add an href attribute to your a element:

<a href="#" id="spanishButton" class="shiny-btn" onclick="setLanguage('spanish');return false">Spanish</a>

Then you’ll be able to see the default pointer cursor for a elements, which is what I gather you want.

---

As you requested in the comments, that site is doing with this CSS:

cursor: pointer;

If you include that, you don’t need the href attribute.