it-swarm.com.ru

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

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 Explorer в настоящее время (июль 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" />
1760
BalusC

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

475
Adam

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

Sample output of Boostrap v4 buttons

Bootstrap (v3) пример оформления:

Sample output of Boostrap v3 buttons

Bootstrap (v2) пример оформления:

Sample output of Boostrap v2 buttons

421
Bern

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

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

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

137
RedFilter

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

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

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

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

Ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Поддержка браузера: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button # Browser_compatibility

110
EternalHour

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

Как это:

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

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

48
Lucian Minea

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

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>
36
saravanabawa
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>
25
ghoppe

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

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

https://jsfiddle.net/hj6gob8b/

22
Uriahs Victor

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

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

21
Nicolas Bouvrette

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

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

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

18
MuffinTheMan

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

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

16
Pekka 웃

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

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

15
artie

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

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


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

15
C.Gadd

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

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

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

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

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

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

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

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

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

13
MoMo

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

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

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

12
lukeocom

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

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

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

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

5
Anees Hameed

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>
3
Adnan Toky

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

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

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

2
Jasch1

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

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

</html>

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

1
Hayz

Вы также можете установить для кнопок type-property значение «button» (это не позволяет отправлять форму), а затем вложить их в ссылку (перенаправить пользователя).

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

Пример:

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

1
Anders Martini

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

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

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

Вот скрипка:

JS Fiddle

1
Logan Wayne

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

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

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

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

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

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

В JavaScript

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

В HTML

<button onclick="setLocation('/<whatever>')>GO</button>"
0
Joshua Michael Waggoner