Why does this CSS button work 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 problem is that it does not reference href when I click on it. Does anyone know why?

Answer 1

By the way, this is not a CSS issue. This is the "I don’t understand buttons" problem:

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

A button may have a send, button, or reset action. If you use the "button" action, you must provide the javascript needed in the OnClick event to go to the page in question.

Answer 2

It seems to me that the button requires an attribute of type and value.

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

onclick :

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

, , <a> CSS.