Можно ли заворачивать button в href?

Question

[The Whiz]

Да/Нет/Подводные камни?

Comments

[Вячеслав Слинько]

На ваш вопрос уже ответили. Встречный вопрос — зачем?

[The Whiz]

интересно

[Валерий Селицкий]

Для кнопки реализованы необходимые стили, но нужен функционал простой ссылки с таким же оформлением, например. Городить дублиующие CSS стили — не предлагать! :)

[Вячеслав Слинько]

Поэтому я и оформляю только через классы. Создается .button, а далее не важно, a.button, button.button или еще что.

[MT]

Городить дублиующие CSS стили — не предлагать

Откройте для себя CSS-препроцессоры и Gzip-сжатие. ;-)

[Валерий Селицкий]

Все давно открыто, но трудозатраты совсем другие. И общие классы я тоже делаю.
Но в контексте вопроса непонятны некоторые моменты. Например — есть ли у человека возможность подключить скрипты, написать стили, или он простой контент менеджер, которому нужно было сделать кнопку-ссылку еще позавчера?

Answer 1

[MT]

Согласно HTML5 помещать кнопку внутрь ссылки является синтаксически некорректным («невалидным»).

Кроме того, в IE ниже 9-й версии такая ссылка не реагирует на щелчок.

Чтобы сделать «ссылкой» кнопку, следует обернуть её простейшей GET-формой:

<form action="/some/example.htm">
    <button type="submit">Ссылка-кнопка</button>
</form>

Некоторые подробности — в моей заметке «Правильный способ сделать кнопку ссылкой».

Comments

[Вячеслав Слинько]

5+

[egorinsk]

> Чтобы сделать «ссылкой» кнопку, следует обернуть её простейшей GET-формой:

Не проще ли средствами CSS стилизовать ссылку в виде кнопки?

[MT]

egorinsk, вы точно прочитали ответ целиком? ;-)
И было бы полезно дополнить ваш комментарий реальным примером стилизации ссылки как стандартной системной кнопки (вид стандартной системной кнопки в разных ОС различается).

[Андрей Самойленко]

спасибо!

Answer 2

[Валерий Селицкий]

<button> при нажатии обрабатывается как субмит формы, соответственно, следует отменить это поведение, например так: <a href="http://li.nk"><button onlick="return false;">Push me</button></a>

Comments

[The Whiz]

Спасибо за помощь!

[Assorium]

Ну вообще не обязательно. У button есть аттрибут type. Можно просто выставить в button и тогда кнопка не будет сабмитить форму.
www.w3schools.com/tags/att_button_type.asp

[Валерий Селицкий]

Вот за эту ремарку с типом — спасибо. Проверил под бравой тройкой — Opera, Firefox, Chrome — работает как ссылка, даже внутри формы. Под IE не проверял, нет актуальной версии под рукой.

Answer 3

[Артур Смирнов]

Делается это так
<button type="button" onclick="JS_Функция">Кнопка</button>
В JS_Функции делаете переход или что вам нужно
Еще необходимо создать скрытый a href, чтобы поисковый робот нашел страницу на которую идет ссылка

Comments

[WiSpace]

Переноправление/JS могут быть выключены в браузере, лучше один из этих вариантов:

<a href="example.html"><button>Кнопка</button></a>
<!-- или -->
<form action="example.html">
    <button type="submit">Кнопка</button>
</form>

Взял из ответов выше