Я хотел бы создать кнопку 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>
2352
Andrew 25 Май 2010 в 20:39

30 ответов

Лучший ответ

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> допускает дочерние элементы.

2412
BalusC 19 Мар 2020 в 08:58
<button onclick="location.href='http://www.example.com'" type="button">
         www.example.com</button>

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

723
Boiethios 11 Окт 2019 в 15:57

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

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

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

168
Hagyn 28 Май 2021 в 14:58

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

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

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

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

Ссылка: formaction

Поддержка браузера:

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

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>
39
Peter Mortensen 28 Окт 2015 в 20:25
<form>
    <input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'"> 
</form>
34
corn on the cob 21 Июл 2020 в 13:05

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

Решение 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 ( Якорь в стиле кнопка ) является хорошей альтернативой для решения этой проблемы с минимальным влиянием на удобство использования.

28
Community 20 Июн 2020 в 09:12

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

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

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

Вы, конечно, можете заключить это в тег формы, но это не обязательно.

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

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

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

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

.. обозначает папку \

  • обозначает файл
    пока четыре | обозначают подкаталог или файл в родительской папке

..общественный
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Если я открою файл main.html , URL-адрес будет таким:

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

Однако, когда я щелкнул кнопку внутри main.html , чтобы изменить его на secondary.html , URL-адрес был бы таким:

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

В конце URL-адреса нет специальных символов.

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

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

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

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

22
Peter Mortensen 6 Май 2021 в 22:06

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

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

https://jsfiddle.net/hj6gob8b/

20
Uriahs Victor 22 Янв 2017 в 16:53

Если вы хотите избежать использования формы или ввода и ищете ссылку, выглядящую как кнопку, вы можете создать красивые кнопки-ссылки с помощью оболочки 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 < / a>, чтобы проверить и поэкспериментировать.

Преимущества такой настройки: 1. Создание блока оболочки div display: block упрощает центрирование (с использованием поля: 0 auto) и положение (в то время как является встроенным, его сложнее позиционировать и невозможно центрировать).

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

  2. Это позволяет вам сделать display: inline-table и

    display: table-cell, что позволяет вам использовать vertical-align: middle для

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

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

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

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

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

20
TylerH 25 Ноя 2019 в 16:24

Следуя тому, что добавили некоторые другие, вы можете пойти с ума, просто используя простой класс 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>

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

18
Peter Mortensen 21 Июл 2014 в 15:26

Если вы хотите создать кнопку, которая будет использоваться для 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;
}
9
Maarek 15 Ноя 2013 в 17:34

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

  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>
9
Peter Mortensen 6 Май 2021 в 22:10

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

  1. Используйте метод <form method="get">, с которого начинается OP. Это работает действительно хорошо, но иногда к URL-адресу добавляется ?. ? - главная проблема.
  2. Это решение работает без включенного JavaScript. Однако резервный вариант добавит ? в конец URL-адреса.
  3. Если включен JavaScript, вы можете использовать jQuery / JavaScript для обработки перехода по ссылке, чтобы ? не добавлялось к URL-адресу. Он плавно вернется к методу <form> для очень небольшой части пользователей, у которых не включен JavaScript.
  4. В коде JavaScript используется делегирование событий, поэтому вы можете присоединить прослушиватель событий до того, как <form> или <button> даже появятся. В этом примере я использую jQuery, потому что это быстро и легко, но это также можно сделать и в «ванильном» JavaScript.
  5. Код 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
Peter Mortensen 6 Май 2021 в 21:53

Для 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>
4
Peter Mortensen 6 Май 2021 в 21:48

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

Например, в синтаксисе 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>
3
Peter Mortensen 14 Янв 2017 в 09:30

Если вы используете сертификат SSL:

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>
3
Peter Mortensen 6 Май 2021 в 22:11

Я использовал это для веб-сайта, над которым сейчас работаю, и он отлично работает !. Если вам тоже нужен крутой стиль, я помещу сюда 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
double-beep 25 Фев 2019 в 20:37

Люди, ответившие с использованием атрибутов <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

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

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

Вот скрипка:

JSFiddle

2
Peter Mortensen 6 Май 2021 в 21:46

В JavaScript

setLocation(base: string) {
  window.location.href = base;
}

В HTML

<button onclick="setLocation('/<whatever>')>GO</button>"
1
Joshua Michael Waggoner 4 Май 2019 в 05:32

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

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

</html>

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

1
Peter Mortensen 6 Май 2021 в 22:09

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

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "https://stackoverflow.com/questions/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>
1
Peter Mortensen 6 Май 2021 в 22:11

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

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>
0
ilans 9 Ноя 2014 в 15:42

Если это внешний вид кнопки, которую вы ищете в базовом теге привязки HTML, вы можете использовать Twitter Bootstrap. framework для форматирования любых из следующих общих ссылок / кнопок типа 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):

Sample output of Boostrap v4 buttons

Пример внешнего вида Bootstrap (v3):

Sample output of Boostrap v3 buttons

Пример внешнего вида Bootstrap (v2):

Sample output of Boostrap v2 buttons

442
Bern 31 Окт 2017 в 16:56

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

Вы не задумывались о том, чтобы сделать обычную ссылку стилизованной под кнопку? Таким образом вы не можете получить специальные кнопки для ОС, но это все еще лучший способ ИМО.

18
Peter Mortensen 21 Июл 2014 в 15:24

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

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

Примере:

<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, строго говоря, не считается действительным HTML в соответствии со стандартом. Тем не менее, он работает должным образом в Firefox и Chrome, но я еще не тестировал его для Internet Explorer.

2
Peter Mortensen 21 Апр 2021 в 16:53

Создать кнопку, используя тег <a> и правильный CSS

.abutton { 
  background: #bada55; padding: 5px; border-radius: 5px; 
  transition: 1s; text-decoration: none; color: black;
}
.abutton:hover { background: #2a2;  }
<a href="https://example.com" class="abutton">Continue</a>
1
Kamil Kiełczewski 7 Май 2021 в 09:39