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

Есть много способов создания HTML кнопки, которая действует как ссылка, т.е., когда вы нажимаете на эту кнопку, она перенаправляется на указанный URL-адрес.

Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.

Добавьте строчный onclick event

  1. к HTML <button> тегу внутри элемента HTML <form>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <button onclick="window.location.href = 'https://w3docs.com';">Click Here</button>
  </body>
</html>
Этот пример может не работать, если кнопка находится внутри тега <form>.
  1. к <input> тегу внутри элемента HTML <form>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form>
      <input type="button" onclick="window.location.href = 'https://www.w3docs.com';" value="w3docs"/>
    </form>
  </body>
</html>
Ссылки не будут работать, если JavaScript не используется, а поисковая система может проигнорировать такие ссылки.

Используйте атрибут action или formaction внутри элемента <form>.

  1. атрибут action

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form action="https://www.w3docs.com/">
      <button type="submit">Click me</button>
    </form>
  </body>
</html>

Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target="_blank".

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form action="https://www.w3docs.com/" method="get" target="_blank">
      <button type="submit">Click me</button>
    </form>
  </body>
</html>
Так как нет форм и данных, этот пример семантически не будет иметь смысла. Но данная разметка допустима.
  1. б. атрибут HTML5 formaction.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form>
      <button type="submit" formaction="https://www.w3docs.com">Click me</button>
    </form>
  </body>
</html>
Атрибут formaction используется только для кнопок с type=”submit”. Так как этот атрибут является HTML5-specific, он может слабо поддерживаться в старых браузерах.

Добавьте ссылку в стиле HTML кнопки (используя CSS)

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .button {
      background-color: #FF4500;
      border: none;
      color: white;
      padding: 20px 34px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      margin: 4px 2px;
      cursor: pointer;
      }
    </style>
  </head>
  <body>
    <a href="https://www.w3docs.com/" class="button">Click Here</a>
  </body>
</html>
Так как требуется сложное стилевое оформление, этот метод может не работать в некоторых браузерах.

Считаете ли это полезным?

Похожие статьи