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

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.