为什么这个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;
}

这是我的“按钮”的代码,其中包含一个链接.

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

问题是当我点击它时它没有链接到href.
谁知道为什么？

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

按钮可以具有“提交”,“按钮”或“重置”动作.如果您使用“按钮”操作,则应在OnClick事件中提供必要的javascript以导航到相关页面.