Как сделать из ссылки кнопку в css

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

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

Правильно

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

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

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

<form action="/example/" target="_blank">

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

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

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

<form action="/example/">
<input type="hidden" name="foo" value="bar" />
<input type="hidden" name="lorem" value="ipsum" />
<button type="submit">Кнопка-ссылка</button>
</form>

Данная форма ведёт на страницу /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-обработчиком события щелчка:

<button onclick="location.href = ‘/example/’">Кнопка-ссылка</button>

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

Чего только не придумают… 🙂 Хотя вот ссылка кнопкой — это на каждом шагу буквально встречается.

Марат, очень помогла ваша статья. Огромное спасибо!
Это самый грамотный и актуальный на сегодня ответ в интернете, который мне удалось найти.
Продолжите, пожалуйста, тему — "Правильный способ сделать картинку ссылкой" (1 вариант — только HTML; 2 вариант — CSS; …). В сети масса устаревших и в корне неверных рекомендаций — кто на что горазд…
И еще один вопрос-просьба. По адресу http://api.yandex.ru/share/ Яндекс раздает невалидный код. На недоуменные вопросы в клубе разработчиков (http://clubs.ya.ru/share/) отвечают: "А зачем вам эта валидность?" Не могли бы Вы исправить их код?

Есть и у этого способа подводные камни. Вот такие вот штуки ( http://s020.radikal.ru/i720/1311/34/bfe7beda17fe.jpg ) при использовании кнопок предыдущей и следующей страницы. Мешается ужасно. Как обойти непонятно.

Никита, если вы о подтверждении, запрашиваемом браузером при попытке обновить страницу (или вернуться на неё по браузерной истории), загруженную в результате отправки формы, то это имеет место только в отношении форм, отправляемых методом POST (когда данные отправляются отдельным HTTP-пакетом).

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

Спасибо большое за информацию. У меня есть один "дурацкий" вопрос :-). Почему при размещении 2 и более кнопок на одной странице (с разными url адресами) все они работают в одном направлении?

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

В общем случае при любых странных проблемах полезно проверять код HTML-страницы валидатором.

Спасибо, мне следовало быть более внимательной. И за Валидатор отдельное спасибо )))

Весь интернет перерыл пока искал! спасибо мне очень помогло! и ошибок никаких нет в браузерах.

Не работает на движок OpenCart 2.0.2

if ($qPos === strlen($uri) — 1) <
header(&#039;HTTP/1.1 301 Moved Permanently&#039;);
header(&#039;Location: &#039; . substr($uri, 0, $qPos));
>
?>

Может у вас есть код для .htaccess ?

как привязать код возврата на предыдущую страницу <a href="#" onclick="history.back();return false;">
к кнопке?
код кнопки:
<td colspan="2" align="left" valign="top" height="116"><a fasc-size-medium fasc-type-glossy fasc-rounded-medium ico-fa fasc-ico-before fa-reply-all" style="background-color: #33809e; color: #ffffff;" data-fasc-style="background-color:#33809e;color:#ffffff;">назад</a></td>
За ранее спасибо.

Den, в вашем случае ссылка функционально не является ссылкой (указывает на фиктивный пустой якорь # и существует только для исполнения JS-кода при щелчке), поэтому можно просто заменить элемент A на элемент BUTTON , сохранив прежний onclick -обработчик.

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

  • JS может быть выключен в браузере пользователя, и тогда такая ссылка работать не будет, запутывая пользователя;
  • пользователь может попадать на одну и ту же страницу с разных страниц вашего сайта (тогда ссылка «Назад» будет всегда указывать на разные страницы), со страницы другого сайта (тогда предыдущий пункт в истории браузера будет указывать на страницу другого сайта — например, поисковика) или отсутствовать вообще (если страница открыта из закладок браузера, и тогда JS-ссылка «Назад» работать не будет).

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

Логично. Спасибо за быстрый ответ. Буду искать другой путь

Спасибо, что просветили! Я тоже сначала сделал не правильно.

ИМХО правильный способ кнопку все таки ссылкой не делать, а просто визуализировать ссылку в виде кнопки:

<a style="box-shadow: 0 0 5px rgba(0,0,0,0.3); border: 1px solid #333; display: inline-block; padding: 5px 15px; text-decoration: none; background: linear-gradient(to bottom, #fcfff4, #e9e9ce); color: #C9DC7D;" href="ссылка">Оставить отзыв</a>

С цветами и стилями только сами поиграйтесь, а то тут какой то ужас стоит 🙂

anstrem, такая кнопка будет отличаться внешне от системных кнопок, имеющих оформление, родное (native) для операционной системы.

В html5 , по-моему, можно оформить кнопку-ссылку проще :

<button onclick="javascript:window.location.href = &#039;index.html&#039;" title="На главную">На главную</button>

и не мучиться с настройкой редиректа

Галина, такая кнопка не будет работать при выключенном JavaScript.

Кстати, ссылка на главную страницу не должна указывать на файл.

Спасибо за подробное описание!
Но у меня не получилось.
Вот код (это популярная в сети кнопка)

<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/81117/teresa_postcard.jpg" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none">
<path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/>
</svg>
<figcaption>
<h2>Guess Who?</h2>
<p>Was born Agnes Gonxha Bojaxhiu.</p>
<button >Learn More about Mother Teresa</button>
</figcaption>
</figure>
</a>

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

Андрей, скорее всего, JS-логика, привязанная к такой кнопке, зависит от конкретной, заранее определённой HTML-структуры, и с этим ничего не поделать. Для полной уверенности можно попробовать заменить обрамляющую ссылку на форму с тем же атрибутом data-path-hover — если не заработает (скорее всего), то ветер с моря дул не судьба.

Самое логичное решение
<input value="HTML форум" onclick="location.href=&#039;http://адрес/&#039;" type="button">

Скажите пожалуйста, а можно ли в этой форме кнопки поменять цвет кнопки и шрифта?
<form action="/kontakty">
<button type="submit">Записаться на консультацию</button>
</form>

Юлия, используйте CSS-свойства background и color .

Добрый день.
Я только-только начал изучать html.
Сейчас пытаюсь сделать элементы выпадающего списка ссылками на якоря.Это возможно сделать, используя только html?
Спасибо.

Сергей, если под выпадающим списком подразумевается HTML-элемент SELECT , то средствами статического HTML (без JavaScript) переход с его помощью на якоря не реализовать.

Замечу, что в общем случае выпадающий список — не самый удобный способ навигации (например, нет возможности открыть произвольную ссылку в новой вкладке). Если ссылок не очень много, целесообразнее реализовать навигацию в виде UL -списка обычных ссылок.

Просто было любопытно. Понял Вас, приму к сведению.
Спасибо за ответ.

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

@MER11111111 Для указания окна или фрейма, в который следует загружать ресурс, на который указывает ссылка, предназначен атрибут target , в качестве значения которого в случае фрейма следует указать значение атрибута name соответствующего фрейма. Но на самом деле фреймы как подход давно устарели, вместо них следует использовать шаблонизацию на стороне сервера.

<button type="submit"> можно не указывать, она по умолчанию submit, достаточно просто <button>

Дмитрий, именно поэтому в тексте и написано «в современных браузерах и IE8+ атрибут необязателен».

У меня сейчас небольшая запара как раз на тему <button value="значение"> как известно это не поддерживается в браузерах до ie8, можно конечно использовать input, но мне нужно именно button (кнопка с favicon), похоже придётся отказаться от поддержки старых браузеров на своём сайте.

Дмитрий, учитывая, что текущая суммарная доля устаревших версий IE вплоть до 10-й включительно составляет всего около 1%, в большинстве случаев можно смело отказываться от поддержки всех версий IE, кроме 11-й , не говоря уж об IE8 с его долей менее 0,3% и IE7 с долей 0,1%, которые не заслуживают внимания уже несколько лет.

Марат у меня вот такая кнопка но ссылка на неё не работает что делать
.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
>

Паша, см. секцию «Правильно» в заметке.

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

Я не силен в программировании, но кнопку для интернет-магазина на PrestaShop все таки смог перепрограммировать.

Вот то, что было изначально:

Нужно было сделать так, чтобы при нажатии на кнопку активировался переход по адресу URL.

Сначала сделал так:

Этот вариант сработал, но мне не хотелось использовать javascript в кнопке. В итоге, благодаря Badrainbow, сделал так:

Это работает. Еще раз спасибо Badrainbow.

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

Сергей, в обработчике onclick в любом случае указывается именно JavaScript-код. Отключите JavaScript — и ваша кнопка работать перестанет.

Использование псевдопротокола javascript: в этом атрибуте вообще ошибочно, он предназначен только для вызова JS-кода через атрибут href ссылок, и от его отсутствия в атрибуте onclick JS-код не перестанет быть JS-кодом.

Напротив, при использовании формы-обёртки кнопка-ссылка будет работать даже при отключённом JS.

Marat Tanalin (автор) 2018-03-04 писал:
Сергей, в обработчике onclick в любом случае указывается именно JavaScript-код. Отключите JavaScript — и ваша кнопка работать перестанет.
==========================================================================

Хочу выразить благодарность Marat Tanalin за разъяснения. Если честно, я был уверен, что обработчик onclick не использует сам по себе JavaScript.
Теперь сделал кнопку на чистом html вот таким образом:

Паттерн с пунктирными ссылками не раскрыт потому, что это кнопка, а не ссылка. Ничего не мешает оформить кнопки как пунктирные ссылки. Благо паттерн Татьянычем раскрыт ещё до появления

Здравствуйте, воспользовался вашим советом для перехода по ссылке при нажатии на кнопку. Но проблема в том что мне надо сделать так? что ссылка открывалась в новом окне, а старое окно оставалось. У меня сейчас при нажатии на кнопку "Заказать" происходит в том же окне переход на указываемую ссылку. Без JS Можно ли это реализовать при таком коде:

или надо всё это заменить на вот такой код:

Иван, у форм тоже есть атрибут target .

помогите пожалуйсто, мне нужно что бы кнопки были расположены горизонтально, а не вертикально. Как это сделать? Вот код:

Влада, например, сделав формы строчными с помощью CSS-объявления display: inline .

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

Влада, например, если ваши формы находятся внутри элемента с классом nav , CSS-правило будет таким:

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

Хорошая статья. Спасибо большое автору.
Подскажите, пожалуйста, что нужно дописать в этой кнопке, чтобы при переходе ссылка открывалась в новом окне?

Я понимаю, что это делается через target="_blank", но где и как его прописать правильно, не пойму?
Помогите, пожалуйста!

Катя, у форм тоже есть атрибут target . Я писал об этом в одном из комментариев. Сейчас добавил соответствующую информацию в саму заметку.

Как сделать из кнопки ссылку?

Довольно часто в практике web-мастера возникает необходимость в установке на сайте различных кнопок, причем кнопок, нажав на которую посетитель попадет в другой раздел сайта, на другую страницу или даже на другой сайт, т.е. эта кнопка должна работать как ссылка .

Сделать красивую кнопку сейчас можно различными способами и множеством сторонних программ. Один из самых простых, распространённых и часто используемых способов — это создать кнопку в Photoshop и разместить её на сайте.

Сегодня мы и разберемся: как же нам разместить кнопку на сайте и сделать её ссылкой . Для наглядности примера, я подготовил пару кнопок с которыми мы и будем работать (см. ниже):

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

В первую очередь хочу отметить , что кнопка, созданная в каком либо графическом редакторе, например Photoshop — это обычная картинка , сохранённая в одном из графических форматов используемых в web-технологиях: GIF , JPEG или PNG , а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Эту тему мы уже подробно обсуждали, поэтому не буду тратить Ваше время, а сразу приведу Листинг 1 вставки изображений для первой кнопки На Главную . Для тех кто не помнит эту тему, посмотреть можно здесь.

Кратенько поясню , графический файл (картинка кнопки На Главную ), имеет следующие параметры: имя glavnal.jpg , ширина 200 пикселей, высота 67 пикселей, путь до этого файла (лежит на сайте) files/20100608/glavnaj.jpg . Если Вам что-то не понятно, вернитесь к Урок 8. Вставляем изображение в HTML.

Второй важный момент — это создание ссылки , про ссылки мы также уже беседовали с Вами, если Вы не знаете как в HTML создаются ссылки, вернитесь к Уроку 9. Ссылкии внимательно узучите этот урок.

В Листинге 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта. Вот так выглядит текстовый вариант абсолютной ссылки http://www.LuksWeb.ru/

Естественно в якоре ссылки вы можете указать любой нужный Вам текст.

А теперь наша задача совместить в коде web-страницы вставку картинки и в качестве якоря ссылки указать не текст а картинку (графический файл) в данном случае это будет наша с Вами кнопка (графический файл glavnal.jpg ). Это мы сделаем в Листинге 3:

<a href="http://www.luksweb.ru/" target="_blank"><img src="files/20100608/glavnaj.jpg" alt="На Главную страницу сайта LuksWeb.ru" width="200" height="67" border="0"></a>

А вот так эта кнопка будет отображаться на web-странице:

На Главную страницу сайта LuksWeb.ru

И если Вы на неё нажмёте, то попадете на Главную страниц у моего сайта. Соотвественно в качестве URL-адреса для перехода, Вы можете указать любой ресурс в Интернете.

Теперь давайте используем вторую картинку (кнопку Оформить заказ ). Для перехода будем использовать индексную страницу моего магазина. Для примера сделаем относительную ссылку ( относительная ссылка — это ссылка работающая в пределах одного сайта ). Кнопку Оформить Заказ Вы видите ниже. Код которым представлена работа этой кнопки, отражен в Листинге 4:

Магазин сайта LuksWeb

Если Вы сейчас нажмёте на кнопку Оформить заказ , то попадете по адресу: http://www.luksweb.ru/shopgold/ главная страница Магазина LuksWebShop.

А теперь сравните Листинг 3 и Листинг 4 и найдите чем отличается Абсолютная и Относительные ссылки.

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

На что еще хочу обатить Ваше внимание. При использовании в качестве якоря ссылок картинки, обязательно добавляйте параметр border="0" иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта.

Если у Вас еще остались вопросы по этой теме, еще раз внимательно прочитайте:

Every developer has a
tab open to
Stack Overflow

A public platform building the definitive collection of coding questions & answers

A community-based space to find and contribute answers to technical challenges, and one of the most popular websites in the world.

A private collaboration & knowledge sharing SaaS platform for companies

A web-based platform to increase productivity, decrease cycle times, accelerate time to market, and protect institutional knowledge.

Thousands of organizations around the globe use Stack Overflow for Teams

Capture your company’s knowledge and context in a discoverable format to unblock your team

Increase productivity

If somebody somewhere has the right answer, suddenly you have it too. Collaborate better in a remote-first world.

Accelerate time to market

Shorten the time between initial idea and complete product. Take delays and misinformation out of the equation.

Protect institutional knowledge

People come and people go, but if you capture their contributions in one central place, that expertise sticks around.

Ensure your company stays on course

Here are just a few types of technologists that we help.

DevOps engineers

Shipping new products and features requires teamwork and coordination. Forget checklists and long docs no one ever reads.

Data scientists

Business decisions are better when backed by data. Give visibility to the data that support your strategies.

Software engineers

Help engineers be more efficient and streamline knowledge sharing using a tool they already love and trust.

Support teams

Level up your support by providing information to your customers using a natural interface: questions and answers.

Engineering leaders

Help your team get the information they need to do their job — reduce burnout and help engineers grow and learn together.

Always free up to 50 teammates

Basic

Up to 250 teammates

Business

Enterprise

Integrates with and improves other tools

All plans come with integrations for ChatOps tools Slack & Microsoft Teams in order to cut down on pings, limit distractions and make the tools even more powerful. Business and Enterprise customers get access to Jira, GitHub & Okta integrations.

Robust read and write API

Single sign-on with AD or SAML

Your own customer success representative

99.5% uptime SLA and priority support

Stack Overflow for Teams has been a resource for our entire company. Not only for developers to solve problems, it’s also enabled our sales field to answer technical questions that help them close deals.

Engineers should help solve the hardest questions, the unknowns, where being familiar with how the product was built is essential. But we don’t want to keep answering solved problems over and over again. That’s where Stack Overflow for Teams really helps.

As we started to use [Stack Overflow for Teams] and saw how nice it was to have a repository of information, we started to see it spread to other teams. Our customer support team started using it, our people success team started using it, next thing we knew, we had [Slack] integrations all over the place.

What we love about Stack Overflow for Teams is that it’s a very dynamic tool…there’s just so many ways to use this as a liaison between different teams and different knowledge bases.

Additional products that reach and engage developers & technologists…

Reach the world’s largest audience of developers and technologists

Connecting communities with the specific technologies they use the most

Build your employer brand to attract tech talent

Programming & related technical career opportunities

Explore technical topics and other disciplines across 170+ Q&A communities

From Server Fault to Super User, much of the Stack Exchange network continues our mission to empower the world to develop technology through collective knowledge. Other sites on the Stack Exchange network further encourage knowledge sharing across topics such as cooking and medicine.

Build a private community to share technical or non-technical knowledge.

site design / logo &#169; 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.12.3.40888

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *