Кнопка или ссылка?16.12.2016 12:03


Кнопка или ссылка?
Я знаю хабр не для жалоб,

но доколе

использовать ты будешь

— ссылки вместо кнопок ‽

КДПВ
Автор иллюстрации gray-monkey@yandex.ru


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

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


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


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


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


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


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


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


Содержание


  • Ссылки
    • Введение
    • Антипатерн
    • Состояния
  • Кнопки
    • Доступность
    • Состояния
    • Отображение
    • CSS
  • Дизайнеру
  • Спасибо
  • Репозиторий на GitHub

Ссылки

Введение: 


Ссылка которая кнопка

Когда наводят указатель на ссылку которая кнопка то в левом нижнем углу появляется надпись javascript:;:
javascript:;
Или адрес с решёткой:
https//site.name/page.html#


ПКМ на такой кнопке и контекстное меню любезно предложит:
Контекстное меню предлагает открыть ссылку в новой вкладке: сохранить, копировать…


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


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


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

Ссылка


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

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

Антипатерн: 


a {
    color: black !important;
    text-decoration: none !important;
    cursor: default !important;
}

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


Антипример с неразличимыми ссылками


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

Состояния:

текст с различными состояниями ссылки


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


a { 
    color: #0645ad;
    cursor: pointer;
    text-decoration: none;
}

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



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


a:hover {
    text-decoration: underline;
}

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



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


a:focus {
    text-decoration: underline;
}

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


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


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


a:focus, a:hover {
    text-decoration: underline;
}


a:active — клик


a:active {
    color: #faa700;
}

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



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


a:visited {
    color: #0b0080;
}

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

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




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


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


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

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

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

Доступность


в моём Chrome 54:
отображение состояний кнопки
На картинке button, button:hover, button:focus, button:active соответственно.


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


Material Design кнопки серые стандартные
Material Design кнопки синие

CSS

Для наглядности — мой вариант велосипеда который выглядит странновато, но для примера сойдёт.
Состояния кнопки в порядке: обычное, наведение, клик, отключена
Обычная, наведение, клик, отключена соответственно.


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


button {
    background: none;
    outline: none;
    border: none;
    text-transform: uppercase;
}


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


button:hover, button:focus {
    color: hsla(108, 12%, 0%, 1);
    box-shadow: -1px 1px 2px hsla(108, 62%, 42%, 1);
    background-color: hsla(108, 62%, 92%, 1)
}


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


button:active {
    color: hsla(108, 42%, 32%, 1);
    box-shadow: -2px 4px 8px hsla(64, 64%, 42%, 1);
    background-color: hsla(64, 64%, 92%, 1);
}


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


button:disabled {
    color: hsla(0, 0%, 64%, 1);
    background: none;
    box-shadow: none;
    opacity: 1;
}
Дизайнеру
Ты цээсэсов можешь и не знать, но состояния отрисовать обязан!

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


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

Спасибо

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

GitHub



Процесс рисования

Комментарии (16)

© Habrahabr.ru