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

Question

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

Answer 1

Есть ли минусы в выполнении чего-либо подобного следующему?

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

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

Answer 2

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

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

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

Конечно, вы можете обернуть это в тег формы, но это не обязательно.

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

<a href="myOtherFile"><button>Next</button></a>

Это также не добавляет никаких символов в конец URL-адреса, однако в нем есть путь к файлу проекта в качестве URL-адреса до окончания имени файла. например,

Если бы моя структура проекта была ...

.. обозначает папку - обозначает файл пока четыре | обозначить подкаталог или файл в родительской папке

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

2. Вы можете просто сделать отображение : блок, переместить его и оформить в виде кнопки, но тогда вертикальное выравнивание текста внутри него станет трудным.

3. Это позволяет вам сделать отображение : inline-table и

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

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

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

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

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

Answer 7

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

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

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

Answer 8

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

Answer 9

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

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="/1465054/kak-sozdat-knopku-html-kotoraya-deistvuet-kak-ssylka">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

Answer 10

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