Почему эта кнопка CSS связывается с тегами <a>?

Question

Вот мой 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, когда я нажимаю на него. Кто-нибудь знает почему?

Answer 1

Кстати, это не проблема CSS.Это проблема «я не понимаю кнопки»:

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

Кнопка может иметь действия «отправить», «кнопка» или «сбросить».Если вы используете действие «кнопка», вы должны предоставить javascript, необходимый в событии OnClick для перехода к рассматриваемой странице.

Answer 2

Я считаю, что кнопка нуждается в атрибуте типа и значения.

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

Вы также можете добавить onclick как:

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

Но, поскольку это простоДля обычной ссылки вам будет проще использовать тег <a> и стилизовать его с помощью CSS.