Як створити кнопку 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 / елемент / кнопка # сумісність браузера

Це насправді дуже просто і без використання елементів форми. Ви можете просто скористатись тегом <a> із кнопкою всередині :).

Подобається це:

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

І він завантажить href на ту саму сторінку. Хочете нову сторінку? Просто використовуйте target="_blank".

EDIT

Через пару років, поки моє рішення все ще працює, майте на увазі, що ви можете використовувати багато CSS, щоб він виглядав все, що завгодно. Це був просто швидкий шлях.

Якщо ви використовуєте внутрішню форму, додайте атрибут type = "reset" разом з елементом кнопки. Це запобіжить дії форми.

<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-адреса, перш ніж закінчуватись ім'ям файлу. напр

Якщо моя структура проекту була ...

.. позначає папку - позначає файл, поки чотири | позначають підкаталог або файл у батьківській папці

..публічний
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Якщо я відкрию main.html URL-адресою,

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

Однак, коли я натиснув кнопку всередині main.html, щоб змінити на sekundar.html, URL-адреса буде,

http://localhost:0000/public/html/secondary.html 

У кінці URL-адреси немає спеціальних символів. Я сподіваюся, що це допомагає. До речі - (% 20 позначає пробіл у URL-адресі, кодований і вставлений на їх місце.)

Примітка: localhost: 0000, очевидно, не буде 0000, у вас там буде свій номер порту.

Крім того? _Ijt = xxxxxxxxxxxxxx в кінці від main.html URL, 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>

Це все. Це зробити дуже просто, і ви можете бути настільки креативними, як хотілося б. Ви керуєте кольорами, розміром, формами (радіусом) тощо. Більш детально ознайомтесь із сайтом, на якому я знайшов це .

Якщо ви хочете уникнути необхідності використання форми або введення, і ви шукаєте посилання на вигляд кнопок, ви можете створити гарні посилання на кнопки за допомогою оболонки, якоря та h1тегу. Ви потенційно хочете цього, щоб ви могли вільно розміщувати кнопку посилання навколо своєї сторінки. Це особливо корисно для кнопок з горизонтальним центром та розміщення тексту з вертикальним центром всередині них. Ось як:

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

2. Ви можете просто зробити <a> дисплей: заблокувати, перемістити його та оформити його як кнопку, але потім вертикально вирівнювання тексту всередині нього стає важким.

3. Це дозволяє зробити екран <a>: вбудована таблиця та <h1> дисплей: комірка таблиці, що дозволяє використовувати вертикальне вирівнювання: посередині на <h1> і по центру по вертикалі (що завжди добре в кнопка). Так, ви можете використовувати прокладки, але якщо ви хочете, щоб ваша кнопка динамічно змінила розмір, це не буде таким чистим.

4. Іноді, коли ви вставляєте <a> у розділ, на який можна натискати лише текст, ця установка робить можливим натискання всієї кнопки.

5. Вам не доведеться мати справу з формами, якщо ви просто намагаєтесь перейти на іншу сторінку. Форми призначені для введення інформації, і вони повинні бути зарезервовані для цього.

6. Дозволяє чітко відокремити стилізацію кнопок та стилювання тексту один від одного (перевагу розтягування? Звичайно, але CSS може отримати неприємний вигляд, тому його добре розкласти).

Це, безумовно, полегшило моє життя для створення мобільного веб-сайту для екранів змінних розмірів.

@ Nicolas, наступний працював для мене, оскільки у вас не було, type="button"через що він почав поводитись як тип подачі. Так як у мене вже є один тип submit.it для мене не працював .... і тепер ви можете або додати клас щоб натиснути кнопку або <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">метод, з якого починається ОП. Це працює дуже добре, але іноді додає ?до URL-адреси. ?Є основною проблемою.
2. Використовуйте jQuery / JavaScript, щоб зробити посилання наступним, коли JavaScript увімкнено, щоб ?не в кінцевому підсумку додати до URL-адреси. Це буде безперебійним <form>способом для дуже невеликої частини користувачів, у яких не ввімкнено JavaScript.
3. Код JavaScript використовує делегування подій, щоб ви могли приєднати слухача подій до <form>або <button>навіть існувати. Я використовую jQuery в цьому прикладі, тому що це швидко і просто, але це можна зробити і в JavaScript "vanilla".
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

А потім створіть своє посилання за допомогою тегу класу, названого за створеним вами стилем 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>