Как создать кнопку 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>

Ответов (25)

Решение

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

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

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

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

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

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

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

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

Нравится:

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

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

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

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

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

  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="https://answacode.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>

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

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

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

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

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

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

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

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

Решение 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="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

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

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

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

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

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

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

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

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

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

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

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

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

  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>

Если вы используете библиотеку CSS или тему, просто примените классы кнопки к тегу привязки / ссылки.

Ниже приведен пример с One UI :

  <a class="btn-block-option" href="">
    <i class="si si-reload"></i>
  </a>

Ответ HTML : если вы хотите создать кнопку HTML, которая действует как ссылка, используйте для нее два общих атрибута: <a> и / или action="" :

<form action="stackoverflow.com"/>
   <button type="submit" value="Submit Form"

Или...

«href» является частью <a> атрибута. Это помогает прямым ссылкам:

<a href="stackoverflow.com">Href</a>

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

<button>
  <a href="www.google.com">Go to Google</a>
</button>

Второй способ - открыть новое окно при нажатии кнопки.

<button onclick="open('www.google.com')">Google</button>

Или, может быть, добавить слушателей событий

document.querySelector("#btn").addEventListener('click', open('www.google.com'))
<button id="btn">Go to Google</button>

Есть много способов сделать это, но это только три небольших примера кнопок, которые действуют как ссылка. Другими словами, кнопки, открывающие ссылки.

Самый простой способ - создать гиперссылку:

<a href="https://google.com">Test</a>

Затем добавьте элемент кнопки:

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

И готово! Я предлагаю вам пройти курс HTML, прежде чем начать

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

Использовать:

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

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

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

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

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

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

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

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

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

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

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

Ссылка: formaction

Поддержка браузера: <button>: элемент Button

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

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