Как создать кнопку HTML, которая действует как ссылка?


1909

Я хотел бы создать кнопку HTML, которая действует как ссылка. Таким образом, когда вы нажимаете кнопку, он перенаправляет на страницу. Я хотел бы, чтобы это было максимально доступно.

Я также хотел бы, чтобы в URL не было никаких дополнительных символов или параметров.

Как мне этого добиться?


Основываясь на ответах, опубликованных до сих пор, я в настоящее время делаю это:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

но проблема в том, что в Safari и Internet Explorer он добавляет знак вопроса в конце URL. Мне нужно найти решение, которое не добавляет символы в конец URL.

Для этого есть два других решения: использование JavaScript или стилизация ссылки, чтобы она выглядела как кнопка.

Используя JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Но для этого, очевидно, требуется JavaScript, и по этой причине он менее доступен для программ чтения с экрана. Смысл ссылки - перейти на другую страницу. Поэтому попытка заставить кнопку действовать как ссылка - неправильное решение. Я предлагаю вам использовать ссылку и стилизовать ее, чтобы она выглядела как кнопка .

<a href="/link/to/page2">Continue</a>

38
Измените GET на POST. Кажется, никто не решил первую проблему ОП, которая была ?в URL. Это вызвано тем, что форма была type="GET"изменена, type="POST"и ?в конце URL-адреса исчезнет. Это происходит потому , что GET передает все переменные в URL, следовательно ?.
redfox05

11
@ redfox05 Это работает в контексте, где вы не знаете, какой метод вы принимаете для своих страниц. В контексте, где вы отклоняете сообщения на страницах, которые ожидают, GETэто потерпит неудачу. Я все еще думаю, что использование ссылки имеет смысл с оговоркой, что она не будет реагировать на «пробел», когда активна кнопка, как это делает. Также некоторые стили и поведение будут отличаться (например, перетаскиваемый). Если вы хотите истинное взаимодействие с кнопками, перенаправление на стороне сервера для завершения URL-адреса ?для его удаления также может быть вариантом.
Николя Бувретт

1
cssbuttongenerator.com может пригодиться, если вы хотите создать кнопку с помощью css.
снег

1
Я думаю, что лучше создать ссылку, похожую на кнопку,
Ясар

1
Просто отметим, что для меня «кнопка действует как ссылка» означает, что я могу щелкнуть правой кнопкой мыши и решить, открывать ли в новой вкладке / окне, которое не работает с решениями JS ...
Betlista

Ответы:


2107

HTML

Простой HTML-способ заключается в том, чтобы поместить его в то место, <form>где вы указываете целевой URL-адрес в actionатрибуте.

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

Если необходимо, установите CSS display: inline;на форме, чтобы она оставалась в потоке с окружающим текстом. Вместо <input type="submit">приведенного выше примера вы также можете использовать <button type="submit">. Разница лишь в том, что этот <button>элемент позволяет детям.

Вы интуитивно ожидаете, что сможете использовать <button href="https://google.com">аналог с <a>элементом, но, к сожалению, нет, этот атрибут не существует в соответствии со спецификацией HTML .

CSS

Если CSS разрешен, просто используйте <a>стиль, который вы стилизуете, чтобы выглядеть как кнопка, используя, среди прочего, appearanceсвойство ( это не поддерживается только в Internet Explorer ).

<a href="https://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Или выберите одну из тех многих библиотек CSS, как Bootstrap .

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

Если JavaScript разрешен, установите window.location.href.

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

Вместо <input type="button">приведенного выше примера вы также можете использовать <button>. Разница лишь в том, что этот <button>элемент позволяет детям.


86
Просто и приятно. Прекрасное решение. Добавьте display: inlineв форму, чтобы держать кнопку в потоке.
Пекка

13
в сафари это добавляет вопросительный знак в конец URL ... есть ли способ сделать это, что ничего не добавляет к URL?
Андрей

11
@BalusC Хорошее решение, но если оно находится внутри какой-либо другой формы (родительской формы), то нажатие этой кнопки перенаправляет на адрес в атрибуте действия родительской формы.
Владимир

100
Это только у меня или у тега <button> отсутствует очевидный атрибут href?

14
Выглядит просто и красиво, но может иметь побочные эффекты, если не будет правильно учтено. т.е. создание 2-й формы на странице, вложенной формы и т. д.
Tejasvi Hegde

599

<button onclick="location.href='http://www.example.com'" type="button">
         www.example.com</button>

Обратите внимание, что type="button"атрибут важен, поскольку его отсутствующее значение по умолчанию - состояние кнопки «Отправить» .


1
@pinouchon Должно работать. окно подразумевается. Может быть ошибка IE9, stackoverflow.com/questions/7690645/…
Адам

12
Кажется, что если вы не укажете type = "button", это не всегда будет работать. Похоже, кнопка по умолчанию будет «отправить»
kenitech

58
Если вы хотите открыть ссылку в новом окне / вкладке, используйте: onclick = "window.open (' example.com', '_ blank' );"
Bennos

4
@kenitech правильно, в соответствии со спецификациями : « Отсутствующее значение по умолчанию - состояние кнопки« Отправить »».
Нильс Кеурентьес

4
но пользователь не может щелкнуть правой кнопкой мыши на открывшейся вкладке, чтобы это работало, вам нужен тег привязки
Irshu

433

Если это внешний вид кнопки, которую вы ищете в базовом теге привязки HTML, то вы можете использовать платформу Twitter Bootstrap для форматирования любой из следующих общих ссылок / кнопок типа HTML для отображения в виде кнопки. Обратите внимание на визуальные различия между версией 2, 3 или 4 платформы:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Образец Bootstrap (v4) :

Пример вывода кнопок Boostrap v4

Образец Bootstrap (v3) :

Пример вывода кнопок Boostrap v3

Образец Bootstrap (v2) :

Пример вывода кнопок Boostrap v2


46
Кажется, немного излишним для стилизации одной кнопки, нет? С помощью границ, отступов, фона и других CSS-эффектов вы можете стилизовать кнопки и ссылки, чтобы они выглядели одинаково, не затрагивая всю структуру. Используемая Bootstrap методология хороша, однако использование Bootstrap кажется чрезмерным.
scottkellum

150

Использование:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

К сожалению, эта разметка больше не действительна в HTML5 и не будет ни проверять, ни всегда работать так, как ожидалось. Используйте другой подход.



3
@Rob: это не моя проблема :) Брось это в Meta и посмотри. Однако targetатрибут imo на краю.
BalusC

128

Начиная с HTML5, кнопки поддерживают formactionатрибут. Лучше всего, никакой Javascript или хитрости не требуется.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Предостережения

  • Должен быть окружен <form>тегами.
  • <button>тип должен быть «отправить» (или не указан), я не могу заставить его работать с типом «кнопка». Что поднимает вопрос ниже.
  • Переопределяет действие по умолчанию в форме. Другими словами, если вы сделаете это внутри другой формы, это вызовет конфликт.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Поддержка браузера: https://developer.mozilla.org/en-US/docs/Web/ HTML / элемент / кнопка # Browser_compatibility


5
Просто для полной информации: formactionсовместим с " IE мир " начиная с версии 10 и выше
Лука Детоми

1
@EternalHour Искренне любопытный. В примерах, которые вы и я предоставили, должна ли быть заметная разница между поведением этих двух форм? В этом конкретном случае <button formaction>=== <form action>?
псевдосавант

2
@pseudosavant - Разница в том, что ваш ответ опирается на Javascript, чтобы работать. В этом решении не нужен Javascript, это прямой HTML.
EternalHour

1
@EternalHour Извините, мне следовало быть более ясным. Очевидно, что JS отличает меня от других, но это только прогрессивное улучшение. Форма по-прежнему идет по этой ссылке без JS. Мне было интересно узнать о предполагаемом поведении только HTML-кода <form>в каждом из наших примеров. Есть formactionна buttonпредполагается добавить ?к пустому представлению GET? В этом JSBin похоже, что HTML ведет себя одинаково для обоих.
псевдосавант

2
Полезно отметить, что это работает, только когда обернуто тегами формы. Обнаружил это нелегким путем ...
Adsy2010

57

Это на самом деле очень просто и без использования каких-либо элементов формы. Вы можете просто использовать тег <a> с кнопкой внутри :).

Нравится:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

И он загрузит href на ту же страницу. Хотите новую страницу? Просто используйте target="_blank".

РЕДАКТИРОВАТЬ

Пару лет спустя, пока мое решение все еще работает, имейте в виду, что вы можете использовать много CSS, чтобы он выглядел как угодно. Это был просто быстрый способ.


18
Хотя это работает, его следует рассматривать не как решение, а как обходной путь, потому что, если вы пропустите этот код через валидатор W3C, вы получите ошибки.
Хайдер Б.

7
Да, Хайдер Б. Вы правы, но вам также следует помнить, что стандарты - это только сырые ориентиры. Как программист, вы всегда должны мыслить нестандартно и пробовать вещи, которых нет в книге;).
Люсьен

НИКОГДА не оборачивайте другие якоря или элементы формы действия в Якорь.
Роко

Ага, а почему так?
Люсьен

Вы должны использовать его <button type="button">...так, чтобы он по умолчанию не выполнял функцию отправки
Стивен Р.

39

Если вы используете внутреннюю форму, добавьте атрибут type = "reset" вместе с элементом button. Это предотвратит действие формы.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

Только если вы хотите сбросить форму. Использованиеtype="button"
Стивен Р

27
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

8
@Robusto, это был язвительный комментарий о пустом пространстве, которое раньше там было :) Это не очень хорошее решение IMO, так как оно не будет работать без JavaScript.
Пекка

1
@Pekka: да, а также это даже не правильно сформированный xhtml
Шон Патрик Флойд

8
если вы используете форму, просто отправьте ее, если вы используете onclick, зачем беспокоиться о форме? -1
НимЧимпский

Это не правильно сформированный HTML. Тег inputне имеет конечного тега.
Питер Мортенсен

10
@PeterMortensen Согласно спецификации HTML , inputэлемент является пустым элементом. Он должен иметь начальный тег, но не должен иметь конечный тег.
ghoppe

27

Кажется, есть три решения этой проблемы (все с за и против).

Решение 1: Кнопка в форме.

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

Но проблема в том, что в некоторых версиях популярных браузеров, таких как Chrome, Safari и Internet Explorer, он добавляет знак вопроса в конце URL. Другими словами, код выше вашего URL будет выглядеть так:

http://someserver/pages2?

Есть один способ исправить это, но это потребует настройки на стороне сервера. Одним из примеров использования Apache Mod_rewrite было бы перенаправить все запросы с завершающим ?на их соответствующий URL без ?. Ниже приведен пример использования .htaccess, но есть полная резьба здесь :

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Подобные конфигурации могут различаться в зависимости от веб-сервера и используемого стека. Итак, краткое изложение этого подхода:

Плюсы:

  1. Это настоящая кнопка, и семантически это имеет смысл.
  2. Поскольку это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и / или имитация щелчка при нажатии клавиши пробела, когда она активна).
  3. Нет JavaScript, не требуется сложный стиль.

Минусы:

  1. Трейлинг ?выглядит некрасиво в некоторых браузерах. Это может быть исправлено хаком (в некоторых случаях), использующим POST вместо GET, но чистый способ - перенаправление на стороне сервера. Недостатком перенаправления на стороне сервера является то, что он вызовет дополнительный HTTP-вызов для этих ссылок из-за перенаправления 304.
  2. Добавляет дополнительный <form>элемент
  3. Позиционирование элементов при использовании нескольких форм может быть сложным и становится еще хуже при работе с адаптивными проектами. Некоторое расположение может стать невозможным для этого решения в зависимости от порядка элементов. Это может в конечном итоге повлиять на удобство использования, если эта задача повлияет на дизайн.

Решение 2. Использование JavaScript.

Вы можете использовать JavaScript для запуска onclick и других событий, чтобы имитировать поведение ссылки с помощью кнопки. Приведенный ниже пример можно улучшить и удалить из HTML, но он просто иллюстрирует идею:

<button onclick="window.location.href='/page2'">Continue</button>

Плюсы:

  1. Просто (для базовых требований) и сохраняйте семантику, не требуя дополнительной формы.
  2. Поскольку это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и / или имитация щелчка при нажатии клавиши пробела, когда она активна).

Минусы:

  1. Требуется JavaScript, что означает менее доступным. Это не идеально для базового (основного) элемента, такого как ссылка.

Решение 3: Якорь (ссылка) в стиле кнопки.

Стилизовать ссылку, например, кнопку , относительно легко, и она может обеспечить одинаковые возможности в разных браузерах. Bootstrap делает это, но этого также легко достичь самостоятельно, используя простые стили.

Плюсы:

  1. Простая (для базовых требований) и хорошая кросс-браузерная поддержка.
  2. Не нужно <form>работать.
  3. Не требует JavaScript для работы.

Минусы:

  1. Семантика в некотором роде нарушена, потому что вам нужна кнопка, которая действует как ссылка, а не ссылка, которая действует как кнопка.
  2. Он не будет воспроизводить все варианты поведения решения № 1. Он не будет поддерживать то же поведение, что и кнопка. Например, ссылки перетаскиваются по-разному при перетаскивании. Также триггер ссылки «пробел» не будет работать без дополнительного кода JavaScript. Это добавит много сложности, так как браузеры не согласуются с тем, как они поддерживают keypressсобытия на кнопках.

Вывод

Решение № 1 ( кнопка в форме ) кажется наиболее прозрачным для пользователей с минимальными затратами труда. Если этот выбор не влияет на ваш макет и возможна настройка на стороне сервера, это хороший вариант для случаев, когда доступность является главным приоритетом (например, ссылки на странице ошибок или сообщения об ошибках).

Если JavaScript не является препятствием для ваших требований к доступности, то решение № 2 ( JavaScript ) будет предпочтительнее, чем № 1 и № 3.

Если по какой-то причине доступность является жизненно важной (JavaScript не является опцией), но вы находитесь в ситуации, когда ваш дизайн и / или конфигурация вашего сервера не позволяют использовать опцию № 1, тогда решение № 3 ( привязка в стиле кнопки ) является хорошей альтернативой для решения этой проблемы с минимальным влиянием на удобство использования.


21

Почему бы просто не разместить свою кнопку внутри ссылочного тега, например

<a href="https://www.google.com/"><button>Next</button></a>

Это, кажется, работает идеально для меня и не добавляет тегов% 20 к ссылке, как вы этого хотите. Я использовал ссылку на Google, чтобы продемонстрировать.

Конечно, вы можете обернуть это в тег формы, но это не обязательно.

При связывании другого локального файла просто поместите его в ту же папку и добавьте имя файла в качестве ссылки. Или укажите местоположение файла, если в не находится в той же папке.

<a href="myOtherFile"><button>Next</button></a>

Это также не добавляет никаких символов в конец URL-адреса, однако в нем есть путь к файлу проекта в качестве URL-адреса до окончания имени файла. например

Если бы моя структура проекта была ...

.. обозначает папку - обозначает файл, а четыре | обозначить подкаталог или файл в родительской папке

..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Если я открою main.html, URL будет

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

Тем не менее, когда я нажал кнопку внутри main.html, чтобы перейти на файл second.html, URL-адрес

http://localhost:0000/public/html/secondary.html 

Никаких специальных символов в конце URL нет. Надеюсь, это поможет. Кстати - (% 20 обозначает пробел в URL, который он закодировал и вставил вместо них.)

Примечание: localhost: 0000, очевидно, не будет 0000, у вас там будет свой собственный номер порта.

Кроме того,? _Ijt = xxxxxxxxxxxxxx в конце URL-адреса main.html, x определяется вашим собственным соединением, поэтому, очевидно, оно не будет равно моему.


Может показаться, что я излагаю некоторые действительно основные положения, но я просто хочу объяснить как можно лучше. Спасибо за чтение, и я надеюсь, что это поможет кому-то по крайней мере. Удачного программирования.


19

Вы можете просто поместить тег вокруг элемента:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/


10
Нет, ты не можешь. HTML запрещает вложение <button>внутри <a>.
Квентин

6
По сути, это то же самое, что и ответ прошлых лет .
Квентин

2
Если это запрещает, то почему это работает? :) Ни один серьезный разработчик не прислушивается ко всему, что говорит валидатор W3C ... попробуйте пропустить через него Facebook, Google или любой другой огромный веб-сайт ... Сеть никого не ждет
Uriahs Victor

3
@UriahsVictor Это может сработать сегодня, но однажды поставщики браузеров могут решить изменить поведение, так как оно недействительно.
Джейкоб Альварес

2
@UriahsVictor Flash и Java-апплеты тоже были довольно распространены.
Джейкоб Альварес

17

Единственный способ сделать это (за исключением гениальной идеи BalusC!) - добавить onclickсобытие JavaScript к кнопке, что не очень удобно для доступности.

Рассматривали ли вы стиль обычной ссылки, как кнопка? Вы не можете добиться конкретных кнопок ОС таким образом, но это по-прежнему лучший способ IMO.


Я думаю, что он говорит не только о функциональности (клик), но и о внешнем виде.

1
@Web Logic Да, именно поэтому я говорю о стилизации ссылки, чтобы она выглядела как кнопка.
Пекка

6
@ChrisMarisic есть много минусов в использовании onClick: он не работает с отключенным JS; пользователь не может открыть ссылку в новой вкладке / окне или скопировать ее в буфер обмена для совместного использования; парсеры и боты не смогут распознать и перейти по ссылке; браузеры с функцией предварительной выборки не распознают ссылку; и многое другое.
Пекка

2
Хотя это и есть действительные аргументы, я не думаю, что это действительно решает проблему доступности. Вы имели в виду удобство использования, а не доступность? В веб-разработке доступность обычно ограничивается тем, могут ли пользователи с нарушениями зрения работать с вашим приложением.
Крис Марисик

17

Придерживаясь того, что добавили несколько других, вы можете сойти с ума, просто используя простой класс CSS без PHP, без кода jQuery , просто с простым HTML и CSS.

Создайте класс CSS и добавьте его в свой якорь. Код ниже.

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

Вот и все. Это очень легко сделать, и вы можете быть настолько креативными, насколько захотите. Вы управляете цветами, размером, формами (радиусом) и т. Д. Для получения более подробной информации посетите сайт, на котором я нашел это .


17

Если вы хотите избежать использования формы или ввода и ищете ссылку, похожую на кнопку, вы можете создать красивые ссылки для кнопок с оболочкой div, якорем и h1тегом. Возможно, вы захотите этого, поэтому можете свободно размещать кнопку ссылки вокруг своей страницы. Это особенно полезно для горизонтальных центрирующих кнопок и имеющих вертикально центрированный текст внутри них. Вот как:

Ваша кнопка будет состоять из трех вложенных частей: div-оболочки, якоря и h1, вот так:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}
<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

Вот в jsFiddle , чтобы проверить его и играть с ним.

Преимущества этой настройки: 1. Создание отображения div-оболочки: блок облегчает центрирование (с помощью поля: 0 авто) и положение (в то время как <a> встроен и его труднее позиционировать, а центрировать его невозможно).

  1. Вы можете просто сделать <a> display: block, переместить его и стилизовать как кнопку, но тогда вертикальное выравнивание текста внутри него становится трудным.

  2. Это позволяет вам создавать <a> display: inline-table и <h1> display: table-cell, что позволяет вам использовать вертикальное выравнивание: среднее на <h1> и центрировать его вертикально (что всегда удобно при кнопка). Да, вы можете использовать отступы, но если вы хотите, чтобы размер кнопки изменялся динамически, это будет не так уж и чисто.

  3. Иногда, когда вы встраиваете <a> в элемент div, кликабелен только текст, эта настройка делает всю кнопку нажатой.

  4. Вам не нужно иметь дело с формами, если вы просто пытаетесь перейти на другую страницу. Формы предназначены для ввода информации, и они должны быть зарезервированы для этого.

  5. Позволяет вам четко отделить стили кнопок и текста друг от друга (преимущество растягивания? Конечно, но CSS может выглядеть неприятно, поэтому его удобно разложить).

Это определенно облегчило мою жизнь, создавая мобильный веб-сайт для экранов переменного размера.


Вы действительно получаете разумную кнопку без CSS вообще
Сорен

15

@ Николас, следующие у меня сработали, так как у вас не было, type="button"из-за чего он начал вести себя как тип отправки ... так как у меня уже есть один тип отправки. Он не работал для меня .... и теперь вы можете добавить класс на кнопку или <a>чтобы получить нужный макет:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

12

Другой вариант - создать ссылку в кнопке:

<button type="button"><a href="yourlink.com">Link link</a></button>

Затем используйте CSS для стилизации ссылки и кнопки, чтобы ссылка занимала все пространство внутри кнопки (чтобы пользователь не пропустил щелчок мышью):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

Я создал демо здесь .


6
Имейте в виду, что в спецификации сказано, что это недопустимо, поскольку кнопки не должны содержать никаких интерактивных потомков. w3.org/TR/2011/WD-html5-20110525/the-button-element.html
lukeocom

1
Вы оба правы. VS2015 помечает это предупреждением: «Элемент« a »не может быть вложен в элемент« button »», но он работает с: IE11, Edge, Chrome, Firefox, Safari и, по крайней мере, с некоторыми (возможно, со всеми) браузерами для мобильных устройств. Так что не используйте эту технику, но если вы использовали в прошлом, она работает сейчас;)
Zeek2

8

Если вы хотите создать кнопку, которая используется для URL в любом месте, создайте класс кнопки для привязки.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

7

Я знаю, что было дано много ответов, но ни один из них, похоже, не решал проблему. Вот мой взгляд на решение:

  1. Используйте <form method="get">метод, с которого начинается OP. Это работает очень хорошо, но иногда добавляет ?к URL. Это ?главная проблема.
  2. Используйте jQuery / JavaScript, чтобы сделать ссылку, следующую, когда JavaScript включен, чтобы в ?конечном итоге не добавлялся к URL. Он будет легко возвращаться к <form>методу для очень небольшой части пользователей, у которых не включен JavaScript.
  3. Код JavaScript использует делегирование событий , так что вы можете прикрепить прослушиватель событий до <form>или <button>даже существовать. В этом примере я использую jQuery, потому что это быстро и просто, но это можно сделать и в «ванильном» JavaScript.
  4. Код JavaScript предотвращает выполнение действия по умолчанию, а затем следует по ссылке, указанной в <form> actionатрибуте.

Пример JSBin (фрагмент кода не может переходить по ссылкам)

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});
<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>


7

7 способов сделать это:

  1. С помощью window.location.href = 'URL'
  2. С помощью window.location.replace('URL')
  3. С помощью window.location = 'URL'
  4. С помощью window.open('URL')
  5. С помощью window.location.assign('URL')
  6. Использование формы HTML
  7. Использование тега привязки HTML

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>


4

Для HTML 5 и стилизованной кнопки вместе с фоновым изображением

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>


5
Не проверяет Вставка в validator.w3.org/nu/#textarea дает ошибку: Входной элемент не должен появляться как потомок элемента.
Марк Амери

3

Также вы можете использовать кнопку:

Например, в синтаксисе ASP.NET Core :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>


2

Люди, которые ответили, используя <a></a>атрибуты, <button></button>были полезны.

НО тогда недавно я столкнулся с проблемой, когда использовал ссылку внутри <form></form>.

Кнопка теперь рассматривается как / как кнопка отправки (HTML5). Я попытался обойти и нашел этот метод.

Создайте кнопку в стиле CSS, как показано ниже:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

Или создайте новый здесь: CSS Button Generator

А затем создайте свою ссылку с тегом класса, названным в честь созданного вами стиля CSS:

<a href='link.php' class='btn-style'>Link</a>

Вот скрипка:

JS Fiddle


3
Установите кнопку type = "button", которая позволит вам нажимать ее, не отправляя форму.
Блейк А. Николс

2

Я использовал это для веб-сайта, над которым я сейчас работаю, и он отлично работает! Если вы хотите немного крутого стиля, я поставлю здесь CSS.

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}

input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}
<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

Работаю JSFiddle здесь .


2

Вы также можете установить кнопки type-property на «кнопку» (она не отправляет форму), а затем вложить ее в ссылку (перенаправить пользователя).

Таким образом, вы можете иметь другую кнопку в той же форме, которая отправляет форму, в случае необходимости. Я также думаю, что в большинстве случаев это предпочтительнее, чем установка метода формы и действия в качестве ссылки (если, конечно, это не поисковая форма ...)

Пример:

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

Таким образом, первая кнопка перенаправляет пользователя, а вторая отправляет форму.

Будьте осторожны, чтобы убедиться, что кнопка не вызывает никаких действий, так как это приведет к конфликту. Также, как указал Ариус, вы должны знать, что по вышеуказанной причине, строго говоря, это не считается действительным HTML, согласно стандарту. Однако в Firefox и Chrome он работает должным образом, но я еще не тестировал его для Internet Explorer.


2
Элемент «кнопка» не может быть вложен в элемент «а».
Ариус

согласно стандарту нет, но по моему опыту это работает нормально, хотя. Пока еще не тестировали кросс-браузер, но, по крайней мере, FF и Chrome справляются с этим просто отлично, с ожидаемым поведением.
Андерс Мартини

Ариус: Прочитайте немного, поэкспериментируйте еще раз и обнаружите, что элемент кнопки может фактически быть вложенным в элемент <a>, если к элементу кнопки не применено его собственное действие (поскольку это, очевидно, приведет к конфликт - какое действие будет выполнять браузер - кнопки или <a>?), но если вы уверены, что сам элемент-кнопка не вызывает никаких действий после нажатия, это должно работать нормально (вероятно, не должно) Хотя это нельзя считать лучшей практикой)
Андерс Мартини

4
Это не о возможности. Это просто против спецификации HTML5 и все.
Ариус

1

Вы можете использовать JavaScript:

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

Замените http://www.google.comна свой веб-сайт, обязательно укажите http://перед URL.



1

Введите window.locationи нажмите enterв консоли браузера. Тогда вы можете получить четкое представление о том, что locationсодержит

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

Вы можете установить любое значение здесь.

Так что для перенаправления на другую страницу вы можете установить hrefзначение с помощью вашей ссылки.

   window.location.href = your link

В твоем случае-

   <button onclick="window.location.href='www.google.com'">Google</button>

0

Если вам нужно, чтобы она выглядела как кнопка с акцентом на градиентное изображение , вы можете сделать это:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

0

Если вы хотите перенаправить страницы, которые находятся на вашем веб-сайте, то вот мой метод - я добавил атрибут href для кнопки, и onclick назначил this.getAttribute ('href') для document.location.href

** Это не будет работать, если вы ссылаетесь на URL вне вашего домена из-за 'X-Frame-Options' в 'sameorigin'.

Образец кода:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.