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

Я хотел бы создать кнопку 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>

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>элемент позволяет детям.

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

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

Если это внешний вид кнопки, которую вы ищете в базовом теге привязки 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) :

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

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

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

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

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

Начиная с 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

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

Нравится:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://jsfiddle.net/hj6gob8b/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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;}

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

Если вы хотите создать кнопку, которая используется для 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;
}

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

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 способов сделать это:

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>

Для 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>

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

Например, в синтаксисе 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>

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

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

Люди, которые ответили, используя <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

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

Вы также можете установить кнопки 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.

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

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

</html>

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

В JavaScript

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

В HTML

<button onclick="setLocation('/<whatever>')>GO</button>"

Введите 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>

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

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

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

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

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

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>