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

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?

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.

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.