9.3 C
Москва
19.10.2026

77

Как сделать ссылку в button html

Как сделать кнопку ссылкой

Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type= «submit» :

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/ .

Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM :

Демо

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value ( имя=значение ), разделённых символом & .

Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value :

Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum .

Chromium/ Blink и WebKit

В браузерах на основе движков Chromium/ Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (баг) (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

приведёт на адрес /example/? вместо ожидаемого /example/ .

Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим специфи­кациям HTML и URL.

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

Ограничения по сравнению с реальной ссылкой

  • У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
  • Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

Кнопка внутри ссылки

Нередко элемент BUTTON просто помещают внутрь ссылки:

Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Демо

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:

Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.

Демо

Программа для масштабирования игр без размытия

Нестандартные расширения CSS

Описанные ниже возможности нестандартные, и использовать их не рекомендуется.

Firefox и Chromium

Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance , значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:

A.example -moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
>

Демо

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

  • morontt2013-03-08 Чего только не придумают… 🙂 Хотя вот ссылка кнопкой — это на каждом шагу буквально встречается.
  • Александр 2013-06-30 Марат, очень помогла ваша статья. Огромное спасибо!
    Это самый грамотный и актуальный на сегодня ответ в интернете, который мне удалось найти.
    Продолжите, пожалуйста, тему — «Правильный способ сделать картинку ссылкой» (1 вариант — только HTML; 2 вариант — CSS; …). В сети масса устаревших и в корне неверных рекомендаций — кто на что горазд…
    И еще один вопрос-просьба. По адресу http://api.yandex.ru/share/ Яндекс раздает невалидный код. На недоуменные вопросы в клубе разработчиков (http://clubs.ya.ru/share/) отвечают: «А зачем вам эта валидность?» Не могли бы Вы исправить их код?
  • Никита 2013-11-15 Есть и у этого способа подводные камни. Вот такие вот штуки ( http://s020.radikal.ru/i720/1311/34/bfe7beda17fe.jpg ) при использовании кнопок предыдущей и следующей страницы. Мешается ужасно. Как обойти непонятно.
  • Marat Tanalin(автор)2013-11-16 Никита, если вы о подтверждении, запрашиваемом браузером при попытке обновить страницу (или вернуться на неё по браузерной истории), загруженную в результате отправки формы, то это имеет место только в отношении форм, отправляемых методом POST (когда данные отправляются отдельным HTTP-пакетом). В данной же заметке описывается отправка форм методом GET (когда данные передаются непосредственно в URL-адресе страницы-адресата в виде пар имя=значение , добавляемых после вопросительного знака к адресу, указанному в атрибуте action формы), и соответствующие страницы пользователь может беспрепятственно обновлять или возвращаться на них без каких-либо запросов на подтверждение от браузера.
  • Наташа 2015-01-22 Спасибо большое за информацию. У меня есть один «дурацкий» вопрос :-). Почему при размещении 2 и более кнопок на одной странице (с разными url адресами) все они работают в одном направлении?
  • Marat Tanalin(автор)2015-01-22 Наташа, скорее всего, в вашем HTML-коде есть ошибки (например, у первой из двух форм отсутствует закрывающий тег

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

  • Наташа 2015-01-22 Спасибо, мне следовало быть более внимательной. И за Валидатор отдельное спасибо )))
  • thnx 2015-02-05 Весь интернет перерыл пока искал! спасибо мне очень помогло! и ошибок никаких нет в браузерах.
  • ValeriusSoft 2015-05-27 Не работает на движок OpenCart 2.0.2 $uri = $_SERVER[‘REQUEST_URI’];
    $qPos = strpos($uri, ‘?’); if ($qPos === strlen($uri) — 1) header(‘HTTP/1.1 301 Moved Permanently’);
    header(‘Location: ‘ . substr($uri, 0, $qPos));
    >
    ?> Может у вас есть код для .htaccess ?
  • Marat Tanalin(автор)2015-05-27 ValeriusSoft, см. новую заметку «Удаляем пустую строку запроса из URL».
  • Den 2015-09-11 как привязать код возврата на предыдущую страницу
    к кнопке?
    код кнопки: назад

    За ранее спасибо.

  • Marat Tanalin(автор)2015-09-11 Den, в вашем случае ссылка функционально не является ссылкой (указывает на фиктивный пустой якорь # и существует только для исполнения JS-кода при щелчке), поэтому можно просто заменить элемент A на элемент BUTTON , сохранив прежний onclick -обработчик. Но в общем случае использование JavaScript для реализации ссылки на предыдущую страницу нежелательно, т. к. :
    • JS может быть выключен в браузере пользователя, и тогда такая ссылка работать не будет, запутывая пользователя;
    • пользователь может попадать на одну и ту же страницу с разных страниц вашего сайта (тогда ссылка «Назад» будет всегда указывать на разные страницы), со страницы другого сайта (тогда предыдущий пункт в истории браузера будет указывать на страницу другого сайта — например, поисковика) или отсутствовать вообще (если страница открыта из закладок браузера, и тогда JS-ссылка «Назад» работать не будет).

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

  • Den 2015-09-11 Логично. Спасибо за быстрый ответ. Буду искать другой путь
  • Mig 2015-09-16 Спасибо, что просветили! Я тоже сначала сделал не правильно.
  • anstrem 2015-09-18 ИМХО правильный способ кнопку все таки ссылкой не делать, а просто визуализировать ссылку в виде кнопки: Оставить отзыв С цветами и стилями только сами поиграйтесь, а то тут какой то ужас стоит 🙂
  • Marat Tanalin(автор)2015-09-18 anstrem, такая кнопка будет отличаться внешне от системных кнопок, имеющих оформление, родное (native) для операционной системы.
  • Галина 2015-09-28 В html5 , по-моему, можно оформить кнопку-ссылку проще : и не мучиться с настройкой редиректа
  • Marat Tanalin(автор)2015-09-28 Галина, такая кнопка не будет работать при выключенном JavaScript. Кстати, ссылка на главную страницу не должна указывать на файл.
  • Галина 2015-09-28 автор, согласна.
  • Андрей 2015-10-06 Спасибо за подробное описание!
    Но у меня не получилось.
    Вот код (это популярная в сети кнопка)


    Guess Who?

    Was born Agnes Gonxha Bojaxhiu.


    Что не делаю, все равно код невалидный.

  • Marat Tanalin(автор)2015-10-06 Андрей, скорее всего, JS-логика, привязанная к такой кнопке, зависит от конкретной, заранее определённой HTML-структуры, и с этим ничего не поделать. Для полной уверенности можно попробовать заменить обрамляющую ссылку на форму с тем же атрибутом data-path-hover — если не заработает (скорее всего), то ветер с моря дул не судьба.
  • SkyFfs 2015-11-24 Спасибо, помогло! )
  • Badrainbow 2015-12-18 Самое логичное решение
  • Юлия 2016-03-12 Скажите пожалуйста, а можно ли в этой форме кнопки поменять цвет кнопки и шрифта?

  • Marat Tanalin(автор)2016-03-13 Юлия, используйте CSS-свойства background и color .
  • Юлия 2016-03-14 Спасибо)
  • Сергей 2016-04-27 Добрый день.
    Я только-только начал изучать html.
    Сейчас пытаюсь сделать элементы выпадающего списка ссылками на якоря.Это возможно сделать, используя только html?
    Спасибо.
  • Marat Tanalin(автор)2016-04-27 Сергей, если под выпадающим списком подразумевается HTML-элемент SELECT , то средствами статического HTML (без JavaScript) переход с его помощью на якоря не реализовать. Замечу, что в общем случае выпадающий список — не самый удобный способ навигации (например, нет возможности открыть произвольную ссылку в новой вкладке). Если ссылок не очень много, целесообразнее реализовать навигацию в виде UL -списка обычных ссылок.
  • Сергей 2016-04-27 Просто было любопытно. Понял Вас, приму к сведению.
    Спасибо за ответ.
  • MER11111111 2017-01-10 Всем привет,информация точна и подробная,спасибо автору,но у меня возник вопрос,если у меня сайт разделён фреймами,то как задать условия появления страницы,ссылка которой в кнопке,в определённом фрейме?(у меня на сайте есть верхний фрейм,боковой(там где находится кнопка) и центральный фрейм(в котором и должен появиться файл,который указан ссылкой) )
  • Marat Tanalin(автор)2017-01-10 @MER11111111 Для указания окна или фрейма, в который следует загружать ресурс, на который указывает ссылка, предназначен атрибут target , в качестве значения которого в случае фрейма следует указать значение атрибута name соответствующего фрейма. Но на самом деле фреймы как подход давно устарели, вместо них следует использовать шаблонизацию на стороне сервера.
  • Dmitriy77 2017-02-11
  • Marat Tanalin(автор)2017-02-11 Дмитрий, именно поэтому в тексте и написано «в современных браузерах и IE8+ атрибут необязателен».
  • Dmitriy77 2017-02-16 У меня сейчас небольшая запара как раз на тему
  • Marat Tanalin(автор)2017-02-16 Дмитрий, учитывая, что текущая суммарная доля устаревших версий IE вплоть до 10-й включительно составляет всего около 1%, в большинстве случаев можно смело отказываться от поддержки всех версий IE, кроме 11-й , не говоря уж об IE8 с его долей менее 0,3% и IE7 с долей 0,1%, которые не заслуживают внимания уже несколько лет.
  • Паша 2018-01-30 Марат у меня вот такая кнопка но ссылка на неё не работает что делать
    .button background-color:#0000ff;
    border: none;
    color: white;
    padding:20px;
    width: 200px; text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size:25px;
    border-radius:8px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    >
    .button:after content: «»;
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
    >
    .button:active:after padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
    > .button:hover background-color: #4CAF50;
    color: white;
    >

  • Marat Tanalin(автор)2018-01-30 Паша, см. секцию «Правильно» в заметке.
  • Максим 2018-02-13 Такой вопрос, при наведении курсора на кнопку, внешность курсора не заменяется на всем принятый указательный палец поднятый вверх (когда наводишь на любую ссылку), есть ли способ как-то сделать это, многие даже не поймут что это ссылка наводя на кнопку)
  • Marat Tanalin(автор)2018-02-13 Максим: BUTTON.example cursor: pointer; >
  • Сергей 2018-03-04 Badrainbow 2015-12-18 писал:
    Самое логичное решение

    ==================================================================
    СПАСИБО ОГРОМНОЕ Badrainbow! Я не силен в программировании, но кнопку для интернет-магазина на PrestaShop все таки смог перепрограммировать. Вот то, что было изначально: » /> Нужно было сделать так, чтобы при нажатии на кнопку активировался переход по адресу URL. Сначала сделал так: » /> Этот вариант сработал, но мне не хотелось использовать javascript в кнопке. В итоге, благодаря Badrainbow, сделал так: » /> Это работает. Еще раз спасибо Badrainbow.

  • Marat Tanalin(автор)2018-03-04

    не хотелось использовать javascript в кнопке

Похожие записи

Как подключить wi fi в поезде ржд

admin

Как в 1с закрыть документ программно

admin

Как перенести текст из word в indesign

admin