Как называется кнопка на сайте со ссылкой

Ссылка Link

Ссылка связывает веб-страницы или выступает как более легкий аналог кнопки.

Когда использовать

Ссылку нельзя использовать для основного действия в окне — используйте для этого кнопку.

Описание работы

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

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

Ссылка не должна вести на ту же страницу, на которой она находится. Такие ссылки бесполезны и только запутывают пользователя: кликнул, страница загрузилась и оказалось, что ты остался там же, где и был. Исключение — интерфейсы с обновляемым контентом. Например, в Диадоке пункт меню «Входящие» всегда остается активным, потому что пользователя удобно на него нажимать для обновления списка документов.

Если ссылка запускает действие, в верстке, такая «ссылка» должна быть сделана кнопкой.

• У такой ссылки должна быть кликабельная область как у кнопки.
• Нужно блокировать открытие такой ссылки в новом окне. Т. е. Cmd +Click в MacOS и Ctrl +Click в Windows должны восприниматься интерфейсом как обычный клик.
• Лучше сопровождать такую ссылку иконкой.

Подчеркивание

Ссылки в продуктах Контура окрашиваются в дефолтный цвет контролов —  #3D3D3D, и имеют подчёркивание того же цвета с 50% непрозрачностью.

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

Иконки в ссылках также помогают идентифицировать её как интерактивный элемент.

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

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

Есть версия, что подчеркивать ссылки пунктиром придумал дизайнер Рома Воронежский.

Много лет на главной странице Яндекса под полем поиска был пример запроса, подчеркнутый пунктиром. Но теперь Яндекс не подчеркивает ссылки, и пунктир ушел в прошлое.

Область нажатия

При верстке ссылки в несколько строк, указывайте у нее display: block , чтобы между строками курсор не превращался в стрелку. Такое происходит при интерлиньяже более 1,5 em.

Вместо ссылки можно использовать кнопку-ссылку, или кнопку без заливки. Такая «ссылка» не будет подчёркиваться при наведении, а будет менять цвет плашки, и реагировать на клик по всей области кнопки:

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

Картинка и ссылка-подпись должны работать как единое целое: при наведении на картинку ссылка должна подчеркиваться:

Название

Если ссылка используется для запуска действия, то название должно быть инфинитивом в совершенной форме (отвечать на вопрос «Что сделать?»), должно однозначно говорить о том, что произойдет если на нее нажать.

Если ссылка используется для перехода на другую страницу — то из ее названия должно быть понятно, куда она ведет, без прочтения всего предложения или абзаца. Нельзя использовать слова «тут» «здесь» и т.п.

Место ссылки в предложении, взято из §83 Ководства:

Название ссылки должно быть достаточно большим, чтобы было удобно нажимать: 2–3 слова.

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

Предлоги и союзы можно включать в ссылку, только если они не меняют смысл ссылки. В данном случае предлог «в» можно включить, т. к. ссылка ведет в предыдущий пост:

А здесь предлог можно включить в ссылку, только если она ведет на сайт про подмосковье. Если ссылки ведет на сайт про Москву, предлог не должен включаться в ссылку, т. к. он искажает ее смысл:

Кавычки включайте в ссылку — так ссылка смотрится целостнее и не возникает визуального шума:

Знаки препинания не включайте в ссылку — они относятся к предложению, а не к слову. Также восклицательный и вопросительные знаки влияют на смысл ссылки. Исключения — если знак пунктуации находится внутри ссылки или ссылкой является всё предложение.

В списках делайте ссылкой всю строку. Текст может быть одноцветным. Это решает проблему шахматного расположения ссылок в тексте и делает работу со списком проще — не нужно целиться в ссылку, достаточно попасть в строку.

Иконка

Ссылку можно дополнить иконкой:

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

Иконка также реагирует на нажатие, но при наведении не подчеркивается:

Цвет

Стандартный и фирменный

В сервисах контура ссылки окрашиваются в стандартный чёрный цвет контролов  #3D3D3D и имеют подчёркивание. При необходимости ссылки допускается выделять синим. Пользователи однозначно воспринимают синий текст, как ссылку.

В интерфейсах Контура используйте синий — #1874CF. Подробней смотрите в Гайде по цвету.

Ссылки допускается выделять фирменным цветом продукта.

Зеленый и красный

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

Оформлять ссылки таким образом уместно, если они стоят рядом.

Так как это ссылки для действий, используйте их вместе с иконками.

Не обязательно негативное действие всегда выделять красным. Это не то действие, которое должен обязательно совершить пользователь. К нему не нужно привлекать внимание, в отличие от ошибок в форме, которые нужно исправить обязательно. Такую ссылку можно делать по умолчанию черной или серой, красной она становится при наведении курсора.

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

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

Если нет другого способа сообщить об ошибке и необходимо привлечь внимание к ссылке — сделайте заливку у фона.

Посещенные ссылки

Если нужно показать пользователю, что он уже посещал эту страницу, посещенную ссылку можно отметить более темным цветом.

Применяйте это в новостях, справке, документации. Не применяйте в навигации и действиях. Посещенные красные и зеленые ссылки не нужно выделять цветом, так как это действия.

Серый

Серые и черные ссылки нужно дополнительно выделять в интерфейсе. Можно сопровождать их иконками, или выстраивать в регулярную структуру, когда само расположение говорит о функциональном предназначении ссылки.

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

Если это серая ссылка с иконкой, вместо неё лучше использовать кнопку-ссылку.

Расположение

При расположении в строку делайте отступы между ссылками 16 px:

Работа с клавиатурой

Ссылка получает фокус только при переходе на нее с помощью клавиатуры: табом или нажав Enter в предыдущем поле.

Ссылка с фокусом выглядит, как ссылка при наведении.

Если ссылка в фокусе, то при нажатии клавиши Enter происходит переход по ссылке.

Дизайн

Курсор мыши при наведении на ссылку меняется на «руку», подчёркивание становится полностью непрозрачным. В момент нажатия ссылка становится темнее —  #292929, в момент клика —  #141414.

Состояния

Фокус и наведение курсора

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

Существует два подхода к созданию кнопки на сайте в виде ссылки. Рассмотрим подробно каждый из них.

1. Кнопка в виде изображения

Это самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg . Тогда, для создания ссылки код должен быть следующим:

body> . a href value">URL">img src value">button.jpg">a> . body>

Вот во что он превращается на странице сайта:

Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/. Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).

2. Кнопка с помощью HTML тега

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

body> . form> input type value">button" value value">Просто кнопка" onclick js">javascript:window.location='URL1'"/> input type value">button" value value">Ещё одна кнопка" onclick js">javascript:window.location='URL2'"/> form> . body>

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

Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target=»_blank» у тега a), то вместо onclick=»javascript:window.location=’. ‘» нужно прописать onclick=»javascript:window.open=’. ‘» (заменить location на open).

Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:

head> style> .btn < //Задание общего стиля для кнопки height:30px; border-color:#c2e254 #9bb838 #9bb838 #c2e254; border-style:solid; border-width:1px; background:#c2e254; cursor:pointer; > .btn:hover < //Стиль кнопки при новедении на него курсора border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66; border-style:solid; border-width:1px; background:#FFFF99; > .btn:focus < //Стиль кнопки, когда она в фокусе background:#ddd; border-color:#ddd #333 #333 #ddd; border-style:solid; border-width:1px; > .btn:active < //Стиль кнопки при нажатии background:#ff0000; border-color:#ddd #333 #333 #ddd; border-style:solid; border-width:1px; > style> head> body> form> input type value">button" value value">Просто кнопка" class value">btn" onclick js">javascript:window.location='URL1'"/> input type value">button" value value">Ещё одна кнопка" class value">btn" onclick js">javascript:window.location='URL2'"/> form> body>

После этого кнопка будет выглядеть следующим образом на странице:

Мы разобрали 2 подхода к решению задачи создания кнопки на сайте. Обычно все используют первый подход, поскольку заморачиваться с input никто не хочет. Более подробно об стилях можно прочитать в статье: тег .

Кнопки — это не ссылки

Кнопки часто просят ставить вместо ссылок просто потому, что такой элемент дизайна нравится больше. В этом материале мы поговорим о разнице между кнопками и ссылками сразу в двух плоскостях — UX и SEO.

Кнопки и ссылки в UX

В UX у ссылок и кнопок разный функционал. Ссылки — элемент навигации. Нажимая на ссылку, пользователь переходит к определенному месту на странице (якорь), попадает в новый раздел (внутренняя ссылка) или уходит на другой ресурс (внешняя ссылка). С кликом по внутренней или внешней ссылке меняется URL, а при нажатии на правую кнопку мыши открывается новое окно.

Кнопка отвечает за какое-либо действие: отправить товар в корзину, прикрепить документ, согласиться, отказаться, открыть форму и пр. Более того, кнопка может отображать состояние формы, будучи активной или неактивной, но никогда не переводит пользователя на другую страницу, сайт или место в документе.

Кнопки оборачивают атрибутом и оформляют плашкой с прямыми или скругленными углами. И вот как кнопка выглядит на сайте и в html.

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

Кнопки и ссылки в SEO

С SEO еще интереснее. В документах расширенной оптимизации Google черным по белому написано: «Роботы Google могут переходить только по ссылкам в корректно оформленных тегах с действительными URL».

Другие форматы ссылок не поддерживаются. Это значит, что обернутая в ссылка не сканируется, не обрабатывается, а значит и не передает вес страницы-донора странице-рецепиенту. То есть все усилия по внутренней оптимизации — мимо.

Совсем недавно эту тему затронул и Джон Мюллер, которому задали вопрос про специфику сканирования ссылок с button и a href . Сотрудник Google подтвердил, что кнопки не имеют URL-адреса и не являются ссылками, а значит поисковик не сканирует их и не обрабатывает каким-либо другим способом.

Что в очередной раз подтверждает правило — не перемудри! И даже если ссылки кажутся слишком простыми и скучными, у поисковиков и пользователей совсем другое мнение.

Если коротко:

Используйте для кнопок — кнопки, а для ссылок — ссылки.

Для кнопок использовать
ссылки
— не комильфо.

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

Для кого эта статья?

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

Во вторых для верстальщика к которому пришёл макет без состояний, чтобы было куда дизайнера послать.

В третьих чтобы вместо очередной тирады о разнице в кнопках\ссылках и нужности дизайна состояний, просто давать ссылку.

Ссылки

Введение

Когда наводят указатель на ссылку которая кнопка то в левом нижнем углу появляется надпись javascript:;:

Или адрес с решёткой:

ПКМ на такой кнопке и контекстное меню любезно предложит:

ctrl + ЛКМ на такой кнопке откроют новую вкладку на которой будет ровно та страница, с которой она была открыта.

Кроме того такая ссылка с решёткой в качестве ссылки, станет :visited , если ещё не стала до этого, и приобретёт соотстветствующее стилевое оформление. Если дизайнер его конечно не зарезал, что в большинстве случаев конечно зря, о чём ниже.

В JavaScript скриптах для таких кнопок дополнительно используется e.preventDefault() , чтобы предотвратить действие кнопки по умолчанию (переход по ссылке) «— это костыль.

Ссылка

• Если клик приведёт к смене адреса,
• этот адрес можно скопировать,
• отправить по электронной почте,
• на него можно снова зайти,
• это не адрес самой страницы
  — это ссылка.

У ссылки должны быть стили для обычного, :active , :visited , :focus и :hover состояний.

Антипаттерн

Поздравляю! С такими стилями все ваши ссылки визуально превратятся в обычный текст. Найти их на странице станет крайне затруднительно.

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

Состояния

a — обычное состояние

В обычном состоянии a должна быть синей или подчёркнутой, а лучше и синей и подчёркнутой, чтобы пользователь без наведения мыши понимал, что это — ссылка. Пользователь привык к тому, что синие слова на странице это ссылки, даже если они не подчёркнуты. Если вам не нравится синий цвет для ссылок, меняйте его, но тогда ссылки подчёркивайте.

a:hover — наведение

a:hover

Когда курсор находится над ссылкой, она становится :hover и в данном примере приобретает подчёркивание. Так пользователь поймёт, что это точно ссылка, на которую можно кликнуть.

a:focus — фокус клавиатуры

a:focus

Когда на ссылку устанавливается указатель, перемещаемый табулятором TAB ↹
она становится :focus . В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством клавиатуры. У некоторых вовсе сломана мышь. В любом случае, занулять :focus состояние — это преступление против таких людей.

Особые спецэфекты применять не обязательно, достаточно таких как у :focus .

CSS чтобы не писать дважды:

a:focus, a:hover

a:active — клик

a:active

Важное состояние :active происходит когда пользователь уже кликнул на ссылку, но клавишу ещё не отпустил. Помогает пользователю понять, что его клик сработал, и ему не нужно кликать по ней несколько раз, чтобы точно перейти на нужную страницу.

a:visited — ранее посещённая страница

a:visited

Можно все посмотреть‽

:visited , поможет пользователю не забыть какие странички он уже открывал и не открывать их повторно. Так вместе с :active и :hover мы чуточку разгрузим интернет от случайных загрузок, и сделаем его чуть лучше и быстре.

В эпоху HTML4 вместо кнопок использовались ссылки подчёрнутые пунктирной линией. Этот паттерн устарел.

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

Пример нестандартного оформления ссылок:

Слова в ссылке должны подчиняться правилам русского языка, капс непозволителен (исключение — аббревиатуры)

HTML5 Кнопка

• Если клик не меняет адрес страницы,
• адрес нельзя скопировать
• и нельзя этим адресом поделиться — это кнопка.

В кнопке позволителен капс, при условии, что вы не используете аббревиатуры. Особенно в неочевидных местах.
Если у вас встречаются аббревиатуры, то верхний регистр в кнопке не желателен, выделяйте их другим способом. Не искушайте пользователей тапать по тому, что не тапается. У пользователей тачскрина нет возможности подсмотреть :hover или :focus состояние. Ну или есть, но происходит это всё не очень удобно, обычно уже после свершившегося тапа.

Доступность

может быть недоступен на архаичных браузерах или устройствах. У кнопок не применятся стили без специальных JavaScript скриптов.
Но вас это не должно беспокоить. На таких устройствах часто и JavaScript не работает. И быть может CSS.

Вообще если следовать идеологии что всё, что должно обрабатываться JavaScript’ом, должно добавляться JavaScript’ом, такой проблемы вовсе не возникнет.

Поведение внутри формы

по умолчанию имеет атрибут type=submit даже если его не прописать.

Ещё этот атрибут может принимать значения reset для сброса заполнения в форме
и button чтобы исключить влияние на форму. Правила хорошего тона предполагают,
что везде нужно писать Кнопка .

Но на деле можно ограничится полной записью только внутри ,
type=submit в остальных местах ни на, что не влияет.

Это кстати отличный сбособ для стилизации кнопки отправки формы.
В отличии от , в содержимое
button можно писать любой HTML код, а не только текст.
Например

   Красный Синий 

Это даёт даже больше свободы в стилевом оформлении чем

Состояния

Похожи на состояния у ссылок за исключением того, что у кнопок нет состояния :visited , зато есть состояние :disabled .
Обычно дефолтное оформление браузера выпиливается основательно, иногда с нейтрализацией отображения состояний отличных от обычного.
Да. Этот гайд для тебя, любитель превратить веб-страницу в бумажный аналог.

Стилей для этих штучек понадобится немного больше, но всё не так страшно. Кроме того ребята из Twitter и отчасти Google уже позаботились о реализации велосипеда.
Тёплый ламповый Bootstrap «и новомодный MaterializeCSS, например.

Отображение

Так выглядит Кнопка в моём Chrome 54:

На картинке button , button:hover , button:focus , button:active соответственно.

Без излишеств. Но учитывая движение Google в направлении Material Design, вполне может статься так, что в скором времени их заменят на подобные аналоги.

CSS

Для наглядности — мой вариант велосипеда который выглядит странновато, но для примера сойдёт.

Обычная, наведение, клик, отключена соответственно.

button — обычное состояние

button

button:hover , button:focus — при наведении

button:hover, button:focus

button:active — в момент клика

button:active

button:disable — отключена

button:disabled

Пример посложнее

Показать CSS

button < margin: .8rem; font-size: 1.42rem; padding: 1rem; background: hsla(180, 90%, 64%, 1); color: hsla(180, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(180, 90%, 32%, 1); box-shadow: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, 42%, 11%, 1), 1px 5px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), inset 0 0 1px 0 hsla(180, 90%, 90%, 1); border: 1px hsla(180, 92%, 56%, 1) solid; border-top-color: hsla(180, 92%, 64%, 1); border-radius: 5px; outline: none; position: relative; transition: all .22s ease-in; >button:hover < background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); border: 1px hsla(420, 92%, 56%, 1) solid; border-top-color: hsla(420, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 1px 5px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), inset 0 0 1px 0 hsla(420, 90%, 90%, 1); >button:focus < background: hsla(108, 90%, 42%, 1); color: hsla(108, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 90%, 32%, 1); border: 1px hsla(108, 92%, 56%, 1) solid; border-top-color: hsla(108, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(108, 90%, 22%, .87), -3px 4px 3px hsla(108, 42%, 11%, 1), 1px 5px 4px hsla(108, 42%, 11%, 1), -4px 1px 0 0 hsla(108, 90%, 32%, 1), inset 0 0 1px 0 hsla(108, 90%, 90%, 1); >button:active < background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 92%, 22%, 1) solid; border-top-color: hsla(420, 92%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 90%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 90%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 90%, 22%, 1); >button:disabled < background: hsla(420, 0%, 64%, 1); color: hsla(420, 0%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 0%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 0%, 22%, 1) solid; border-top-color: hsla(420, 0%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 0%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); >button:disabled.in_ajax

Дизайнеру

Ты цээсэсов можешь и не знать, но состояния отрисовать обязан!

От дизайнера помимо макета с обычным состоянием ссылки или кнопки, требуется прилагать различные состояния, дабы не устраивать верстальщику батхерт.
Например так:

Ребята из Google сделали такой макет.

Спасибо

Спасибо, что дочитали. Всё здесь написаннное не является 100% истиной в последней инстанции.
Репозиторий

GitHub

Ссылка на репозиторий этой статьи. Если хотите дополнить или исправить, присылайте пожалуйста Pull Request