Why does this CSS button mess with <a> tags?

Question

Here is my CSS

   button {
    border: 0 none;
    cursor: pointer;
    padding: 0 15px 0 0;
    text-align: center;
    height: 30px;
    line-height: 30px;
    width: auto;
}
button a {
    color:white;
    text-decoration:none;
}

button.rounded {
    background: transparent url(/images/button/btn_right.png) no-repeat scroll right top;
    clear: left;
    font-size: 0.8em;
}

button span {
    display: block;
    padding: 0 0 0 15px;
    position: relative;
    white-space: nowrap;
    height: 30px;
    line-height: 30px;
}

button.rounded span {
    background: transparent url(/images/button/btn_left.png) no-repeat scroll left top;
    color: #FFFFFF;
}

button.rounded:hover {
    background-position: 100% -30px;
}

button.rounded:hover span {
    background-position: 0% -30px;
}

button::-moz-focus-inner {
border: none;
}

Here is the code for my "button" with a link in it.

<button class="rounded"><span><a href="profile.php">Profile</a></span></button>

The issue is it does not link to the href when i click on it. Anyone know why?

Answer 1

I believe button needs a type and value attribute.

http://www.w3schools.com/tags/tag_button.asp

You can also add onclick like:

<button onclick="location.href='/profile.php';">Profile</button>

But, since its just a regular link, you'll have a easier time using the <a> tag and styling it with CSS.

Answer 2

Incidentally, it's not a CSS problem. It's a "i don't understand buttons" problem:

http://www.w3schools.com/tags/tag_button.asp

A button can have "submit", "button" or "reset" actions. If you are using the "button" action you should provide the javascript necessary in the OnClick event to navigate to the page in question.