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

Ответ 1

HTML

Простой способ HTML состоит в том, чтобы поместить его в <form>, в котором вы указываете желаемый целевой URL в атрибуте action.

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

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

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

CSS

Если CSS разрешен, просто используйте <a>, который вы хотите выглядеть как кнопка, используя, помимо прочего, свойство appearance (только поддержка Internet поддержка браузера в настоящее время (июль 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" />

Ответ 2

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

Ответ 3

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

Пример загрузки (v4):

Пример загрузки (v3):

Пример загрузки (v2):

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

Как это:

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

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

EDIT

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

Есть ли недостатки в выполнении следующих действий?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

Где a.nostyle - это класс, который имеет стиль вашей ссылки (где вы можете избавиться от стандартного стиля ссылок), а span.button - это класс, который имеет стиль для вашего "button" (фон, граница, градиент, и др.).

Ответ 11

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

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

https://jsfiddle.net/hj6gob8b/

Ответ 12

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

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

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

Ответ 13

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

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

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

Если вы хотите избежать использования формы или ввода, и вы ищете ссылку на кнопку, вы можете создать красивые кнопки с помощью обертки div, привязки и тега h1. Возможно, вам это захочется, чтобы вы могли свободно размещать ссылку на своей странице. Это особенно полезно для горизонтально центрирующих кнопок и с вертикально-центрированным текстом внутри них. Вот как:

Ваша кнопка будет состоять из трех вложенных элементов: обертки div, якоря и h1, например:

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

Затем в CSS ваш стиль должен выглядеть так:

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

Вот jsFiddle, чтобы проверить его и поиграть с ним.

Преимущества этой настройки: 1. Создание дисплея обертки div: блок упрощает центрирование (с использованием поля: 0 авто) и положение (в то время как <a> является строгим и сложнее в позиции и не может центрировать).

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

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

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

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

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

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

Ответ 17

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

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

Я создал демонстрацию здесь.

Ответ 18

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

Ответ 19

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

• Используйте метод <form method="get">, с которого начинается OP. Это работает очень хорошо, но иногда добавляет ? к URL-адресу. Главной проблемой является ?.
• Используйте jQuery/JavaScript для выполнения следующей ссылки, когда JavaScript включен, поэтому ? не добавляется к URL-адресу. Он будет без проблем возвращаться к методу <form> для очень небольшой доли пользователей, у которых нет JavaScript.
• В JavaScript-коде используется делегирование событий, поэтому вы можете присоединить прослушиватель событий до того, как существуют <form> или <button>. В этом примере я использую jQuery, потому что это быстро и просто, но это можно сделать и в 'vanilla' JavaScript.
• Код 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>

Ответ 20

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>

Ответ 21

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

Ответ 22

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

Например, в синтаксисе ядра ASP.NET:

// 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>

Ответ 23

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

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

Ответ 24

Относительно ответа BalusC,

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

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

Ответ 25

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

И затем создайте свою ссылку с тегом класса, названным в стиле CSS, который вы создали:

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

Здесь скрипка:

JS Fiddle

Ответ 26

Используйте его как data-href="index.html" внутри тега button.

Ответ 27

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

Ответ 28

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

Ответ 29

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

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

</html>

Ответ 30

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

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