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

ПРИМЕЧАНИЕ. У вас уже есть ответ со многими вариантами, я собираюсь поставить тот, который похож на тот, который у вас уже есть, но с упором на часть « И я хотел бы, чтобы он был как можно более доступным » .

Ссылки и кнопки имеют различную функциональность: ссылки подключаются к другому контенту, а кнопки будут связаны с действиями (им не нужно никуда перенаправлять или к чему-либо подключаться).

Учитывая доступность, не рекомендуется изменять кнопку, чтобы она функционировала как ссылка . На самом деле это то же самое предложение, что и W3C (мой перевод):

Предупреждение: при использовании HTML используйте расширение <a>. Авторам не рекомендуется перепрофилировать другие элементы для создания ссылок.

Мало того, что это семантически непоследовательно, это также может привести к проблемам в зависимости от метода, который вы используете для его реализации. Например, если у пользователя отключен JavaScript (редко в браузерах, не так уж и редко в некоторых программах чтения с экрана), некоторые из методов, описанных в ответе Wiki, не будут работать напрямую.

Вот почему, с точки зрения доступности, лучший способ создать кнопку, которая работает как ссылка, — это использовать ссылку и оформить ее так, чтобы она выглядела как кнопка:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<button class="btn btn-success">¿Soy un botón o un enlace?</button>
<a href="#" class="btn btn-success">¿Soy un botón o un enlace?</a>

Если, несмотря на эту рекомендацию, вы хотите использовать кнопку как ссылку, вы можете воспользоваться любым из способов, описанных выше. Но чтобы сделать ее доступной, вы должны сообщить браузеру (или программе чтения с экрана), что эта кнопка не на самом деле ссылка, кнопка, но ссылка, и вы должны относиться к ней как к таковой. Для этого вы должны использоватьrole="link" .

Вы role="link"указываете, что поведение этого элемента будет похоже на поведение ссылки . Итак, у вас может быть что-то вроде этого:

.enlace {
  display:inline;
  border:0;
  padding:0;
  margin:0;
  text-decoration:underline;
  background:none;
  color:#000088;
  font-family: arial, sans-serif;
  font-size: 1em;
  line-height:1em;
}

.enlace:hover {
  text-decoration:none;
  color:#0000cc;
  cursor:pointer;
}

<button class="enlace" role="link" onclick="window.location='http://es.stackoverflow.com'">¿Soy un botón o un enlace?</button>
<a class="enlace" href="http://es.stackoverflow.com">¿Soy un botón o un enlace?</a>

Ответ скопирован отсюда

HTML

Простой HTML-способ сделать это — указать целевой URL-адрес в <formulario>качестве действия атрибутов ( action).

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

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

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

CSS

Если вы можете использовать CSS, просто используйте <a>стиль со стилем, чтобы он выглядел как кнопка, используя другие свойства внешнего вида (только IE поддерживает его (по состоянию на июль 2015 г.), и он все еще плохой).

<a href="http://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="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

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

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

Ответ скопирован отсюда

Если вы хотите добиться простого внешнего вида кнопки в простом HTML, внутри <a>тега привязки ( ), то вы можете использовать платформу Twitter Bootstrap для форматирования любой из следующих обычных кнопок/ссылок HTML, как если бы это была кнопка. Существуют небольшие различия между версиями этого фреймворка, имейте это в виду.

<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 (v2) :

Пример отображения Bootstrap (v3) :

См. Bootstrap (v2) или Bootstrap (v3) в разделе кнопок для некоторых примеров.

Если то, что вы хотите сделать, это html-ссылка с внешним видом кнопки, этого можно легко добиться, задав класс css для рассматриваемой ссылки, позвольте мне объяснить:

Чтобы придать ему законченный вид, я рекомендую использовать библиотеки стилей Bootstrap, поместив Bootstrap cdn в заголовок вашей страницы (cdn — это соединитель, который позволяет вам потреблять библиотеки, физически не имея их в вашем проекте, вы должны быть подключены к Интернет, чтобы иметь возможность использовать стили, это важно!).

В последствии создать любую ссылку и добавить к ней класс, в Bootstrap их много, класс для кнопок это btn, в разных его ипостасях btn-success, btn-warning, btn-danger и другие.

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
      integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
      crossorigin="anonymous">

<a href="https://google.com" class="btn btn-success"> Ir a Google !</a>

Надеюсь, я помог. Успехов вашему проекту!