для чего используется button
Когда следует использовать элемент Button
Вы используете его, хм … ну, когда хотите разместить на странице кнопку, по которой пользователь может кликнуть, не так ли? К сожалению, все немного сложнее. В принципе это близко к истине, но давайте изучим вопрос глубже.
Сам элемент выглядит таким образом:
Что является самым распространенным результатом клика на что-нибудь на веб-сайте? Переход на новый URL-адрес, как если бы вы нажали ссылку.
Элемент сам по себе, не может этого сделать. Было много разговоров о том, чтобы разрешить « href везде », но ничего из этого так и не вышло.
При нажатии на кнопку действительно производятся определенные действия, если используется соответствующий контекст…
Кнопка – это элемент формы
Веб-формы могут содержать кнопки для выполнения (подтверждения) действий. Вы можете подумать, что это выглядит приблизительно так:
Однако формы также могут иметь кнопки отмены. Вы можете дублировать вид действия кнопки, изменив поведение по умолчанию с выполнения (подтверждения) действия на отмену:
Кнопки могут содержать контент
Основной причиной использования элемента является то, что он содержит и открывающийся, и закрывающийся теги ( ). А это значит, что его можно разграничить с любым другим кодом. На практике часто возникает такая ситуация:
Насколько я могу судить, не существует особых ограничений относительно того, что вы можете разместить внутри кнопки, так что вы можете поместить туда что угодно, создав действительно причудливые кнопки. Возможно использование также и псевдо элементов.
Учтите: «если кнопка не имеет валидного href, это просто элемент »
Ссылка в этой кнопке не имеет смысла. 0 использован только для того, чтобы не осуществлялся переход на другую страницу, потому что идентификаторы не могут начинаться с этой цифры.
Скорее всего, выше приведенный код означает что-то типа: Я собираюсь кликнуть кнопку, чтобы сделать что-то с JavaScript. Так или иначе, это, кажется, лучше, чем использовать обычный
Если вам не нравятся эти бессмысленные ссылки, для существует неплохая альтернатива. Но, к сожалению, вне контекста блока
Что лучше использовать: ссылки или кнопки
При вёрстке макета не всегда понятно, что перед нами — кнопка или ссылка. Внешне эти элементы могут быть очень похожи, но их функции различаются и браузер реагирует на них по-разному. Поэтому неправильный выбор может привести к ошибкам в работе веб-страницы.
Кекс сейчас всё объяснит
Почему возникает проблема
Ссылка — это элемент навигации. Обычно она представляет собой текст, нажимая на который, пользователь переходит на другую страницу или перемещается к другому месту на текущей странице. То есть ссылка отвечает за взаимосвязь веб-ресурсов или разделов одного ресурса.
Кнопка — это функциональный элемент. Она отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и т. д.
Проблемы возникают, когда внешне кнопка очень похожа на ссылку — текст без плашки, или ссылка напоминает кнопку — текст расположен на фоне прямоугольной плашки.
Пример двух кнопок, где нижняя похожа на ссылку
Пример ссылки, похожей на кнопку
Что случится, если вместо ссылки сделать кнопку
Контекстное меню при клике правой кнопкой мыши на кнопку
Такая кнопка не позволит открыть страницу в новой вкладке и через комбинацию клавиш — Ctrl и левая кнопка мыши.
Адрес правильной ссылки в окне браузера при наведении на неё курсора
Что произойдёт, если вместо кнопки сделать ссылку
При нажатии пользователем на ссылку правой кнопкой мыши браузер предлагает действия, которые можно совершить именно со ссылкой:
Контекстное меню при клике правой кнопкой мыши на ссылку
Как определить элемент по макету
Конкретные указания часто прописывают в техническом задании к макету. В стайлгайде самого макета можно посмотреть состояния элемента.
Состояния ссылок в стайлгайде макета
Всё-таки кнопка или ссылка?
Если дизайнер по каким-то причинам не отрисовал состояния вообще, то придётся руководствоваться одной логикой.
Пример
На макете отрисована фраза «Войти». Если клик по ней должен открывать окно для ввода регистрационных данных на этой же странице, это кнопка. Если при нажатии должна открываться отдельная страница для входа, это ссылка.
Ссылки и кнопки есть на каждом сайте
Поэтому лучше сразу научиться делать сайты. Попробуйте бесплатные тренажёры HTML Academy, а там дальше как пойдёт.
Нажатие на кнопку — согласие на обработку персональных данных
Стилизация старого доброго элемента button
Кнопка — это один из тех элементов, которые чаще всего используются на веб-страницах. Тег может быть применён для запуска некоего процесса вроде вывода данных, открытия модального окна, отправки формы и так далее. В материале, перевод которого мы публикуем, речь пойдёт о тонкостях стилизации элемента button и о том, как оформлять кнопки с учётом того, чтобы они хорошо работали бы в любых браузерах. Кроме того, тут будет рассмотрено большинство часто используемых стилей кнопок. Поговорим мы здесь и о некоторых сложностях, которые возникают при работе с кнопками.
Стили, применяемые к кнопкам по умолчанию
Может, разговор о «стандартных стилях» покажется кому-то обсуждением каких-то элементарных вещей, но, на самом деле, поговорить об этом довольно интересно. Вот стандартная таблица стилей для кнопок из пользовательского агента Google Chrome.
А вот как выглядит стандартная кнопка, при выводе которой стили по умолчанию не менялись.
Простая кнопка, к которой применены стандартные стили
Свойство appearance этих кнопок установлено в none
Кнопка после сброса свойств
Теперь, когда мы сбросили стандартные стили кнопки, пришло время двигаться дальше. А именно, я хочу рассказать о том, как стилизовать кнопки, основываясь требованиях, предъявляемых к их дизайну.
Стилизация обычных кнопок
Начнём с базового примера, поговорив о стилизации обычных кнопок, на которых выводится лишь текст. На следующем рисунке представлена «анатомия» обычной кнопки.
Цвет текста (Text Color), размер шрифта (Font Size), фон (Background), скругление углов (Roundness), внутренний отступ (Padding)
Имея вышеприведённый CSS-код, мы можем получить кнопку, похожую на ту, которая показана на предыдущем рисунке. После того, как базовый стиль кнопки задан, нужно позаботиться о внешнем виде кнопки в различных состояниях.
Обычное состояние кнопки (Normal), получение фокуса (Focus), наведение на кнопку указателя мыши (Hover), отключение кнопки (Disabled)
▍Стили, применяемые к кнопкам при наведении на них мыши и при получении ими фокуса
Для того чтобы указать пользователю на то, что на кнопку наведён указатель мыши, важно оснастить кнопку стилем, рассчитанным на это событие. То же самое касается и изменения внешнего вида кнопки при получении ей фокуса в ситуации, когда со страницей работает пользователь, применяющий клавиатуру.
Этот материал указывает на то, что важен порядок добавления стилей, применяемых к кнопке при наведении на неё мыши ( hover ) и при получении ей фокуса ( focus ).
Хорошо, если сначала идёт стиль hover, а потом — стиль focus
Вот как выглядит правильный порядок описания стилей:
▍Минимальная ширина кнопки
Для того чтобы кнопка хорошо выглядела, она должна иметь определённую ширину. Важно заранее об этом подумать и принять во внимание длинные и короткие надписи, которые могут содержаться на кнопках. Благодаря свойству min-width можно установить минимальную ширину кнопки. Вот моя статья, где в подробностях обсуждается это и другие подобные свойства.
Стоит задавать свойство кнопок min-width
▍Внутренние отступы
Привлекательной может выглядеть идея, в соответствии с которой кнопкам не назначают горизонтальные внутренние отступы. Ведь кнопки имеют определённую ширину, а значит — между краями кнопок и надписями, содержащимися на них, будет достаточно места. Так? Нет, не так. Реализация этой идеи может иметь негативные последствия в тех случаях, когда надпись на кнопке меняется.
Взглянем на следующий рисунок.
Рекомендовано назначать кнопкам внутренние отступы
▍Семейство шрифта, используемого для надписей, расположенных на кнопках
▍Стилизация отключённых кнопок
Для того чтобы указать пользователю на то, что кнопка отключена, к ней можно добавить атрибут disabled и стилизовать кнопку средствами CSS.
Вот HTML-код, описывающий отключённую кнопку:
Вот CSS-код стилизации такой кнопки:
Когда кнопка отключена, она не может получить фокус с клавиатуры и удаляется из дерева доступности элементов страницы.
▍Внешний вид указателя мыши при наведении его на кнопку
Стандартный указатель мыши, наведённый на кнопку, выглядит как стрелка. Мне нравится этот ответ на StackOverflow: «Кнопки — это традиционный элемент управления настольных программ. Это — среда, в которой указатель в виде руки никогда не использовался до наступления эры интернета. Когда на веб-страницах стали применять тот же самый элемент управления, разработчики просто пытались сделать так, чтобы кнопки выглядели так же, как в настольных приложениях».
Для того чтобы переопределить обычное поведение указателя, рекомендовано поменять стандартный курсор-стрелку на курсор в виде руки.
Стандартный курсор-стрелка и улучшенный курсор в виде руки.
Теперь, когда мы обсудили базовые вопросы стилизации кнопок, приведём полный CSS-код, включающий в себя всё то, чего мы коснулись выше:
В следующих разделах мы поговорим о разных стилях и типах кнопок, которые вы можете использовать в своих проектах.
Кнопки со значком
Иногда нужно, чтобы на кнопке был бы некий значок. Это может понадобиться для того, чтобы выделить кнопку, или чтобы лучше проинформировать пользователя о роли кнопки. Важно, чтобы кнопки со значками были бы доступны пользователям с ограниченными возможностями.
Примеры кнопок со значками
Обратите внимание на то, что я воспользовался стилем vertical-align: middle для того чтобы выровнять значок и содержимое кнопки по вертикали.
Вот HTML-код кнопки, о которой идёт речь:
Может показаться, что теперь достаточно просто скрыть элемент span и дело будет сделано:
Хотя при таком подходе текст пропадает, а значок остаётся, это очень плохо в плане доступности контента. Кнопку уже «не видят» инструменты для чтения с экрана. Например, VoiceOver в macOS сообщает о том, что такая кнопка — это просто «Button», без каких-либо подробностей о ней. У этой проблемы есть несколько решений.
▍Использование SVG-значков
▍Настройка размеров кнопки со значком
Кнопка, у которой задано CSS-свойство min-width, и кнопка, у которой это свойство не задано
▍Визуальное скрытие текста
▍Установка размера шрифта в 0
▍Использование атрибута aria-label
Если вы хотите больше узнать о кнопках со значками — взгляните на этот материал.
Кнопки, содержащие несколько строк текста
В некоторых случаях может понадобиться, чтобы кнопка содержала бы две строки текста. Ниже показан пример такой кнопки.
Кнопка, содержащая две строки текста
Тут показана кнопка для формы подписки, содержащая основной и вспомогательный текст. Как сделать такую кнопку и при этом не забыть о её доступности для людей с ограниченными возможностями? Вот соответствующий HTML-код:
Средство для чтения с экрана «озвучит» эту кнопку как «Subscribe to our newsletter 240K+ subscribers». Когда пользователь это услышит, это его может запутать, так как ничто не будет разделять две строки текста, выводимые на кнопке. Взгляните на скриншот инструмента Chrome для исследования доступности элементов.
Исследование доступности элементов в Chrome
Для того чтобы не путать пользователей, я предпочёл бы скрыть вторую строку текста от средств для чтения с экрана. Сделать это можно, использовав атрибут aria-hidden в соответствующем элементе :
Если по какой-то причине изменить HTML-разметку нельзя, есть и другой способ добавления дополнительного текста на кнопку. Решение этой проблемы, которое показалось мне интересным, я нашёл на сайте Smashing Magazine. Оно заключается в том, чтобы размещать содержимое, пользуясь псевдоэлементами. При таком подходе средства для чтения с экрана не будут видеть ничего лишнего. Вот CSS-код этого решения:
Ссылки () или кнопки ( )?
Когда стоит пользоваться ссылками, а когда — кнопками? Для начала давайте поговорим о том, чем они отличаются друг от друга.
▍Ссылки
▍Кнопки
Использование ссылок и кнопок
▍Элемент не обязан выглядеть как кнопка
Мне нравится этот пример, в котором, с учётом требований доступности контента, реализована панель-«аккордеон». Вначале, если представить, что JavaScript недоступен, результат рендеринга разметки выглядит так, как показано ниже.
Материалы страницы в условиях недоступности JavaScript
Вот HTML-код фрагмента такой разметки:
В случае доступности JavaScript вышеприведённая разметка позволит описать элементы, которые могут сворачиваться и раскрываться. Достигается это путём создания кнопки и добавления её в элемент
Материалы страницы в условиях, когда JavaScript-функциональность доступна
В данном случае можно сказать, что использование элемента — это правильный выбор, так как кнопка решает задачу разворачивания и сворачивания блоков текста.
▍Кнопка загрузки
Ссылка для загрузки документа, оформленная как кнопка
Вот код этой ссылки:
При таком подходе в нашем распоряжении оказывается ссылка, стилизованная как кнопка, которая делает своё дело, используя лишь семантические структуры HTML.
Кнопки с обводкой
Обычная кнопка при наведении на неё мыши становится кнопкой с обводкой
Благодаря такому подходу в нашем распоряжении оказывается кнопка, вокруг которой, при наведении на неё мыши, выводятся её границы. При этом фон кнопки становится прозрачным.
Градиентные кнопки
Когда я работал над статьёй о позиционировании элементов, мне понадобилась кнопка с градиентным заполнением.
Мне было нужно нечто, подобное следующему рисунку.
Градиентная кнопка и её вариант с обводкой
Тут представлены два варианта кнопки — градиентная кнопка и кнопка с обводкой. Для того чтобы добиться такого внешнего вида кнопки, мне нужно было, чтобы у базовой (градиентной) кнопки имелась бы прозрачная граница. Эта граница будет показана только для кнопки с обводкой.
Тут всё, вроде бы, выглядит разумно, но в ходе работы я столкнулся со странной проблемой. Я даже попытался решить её, попросив помощи у пользователей Twitter. Эта проблема представлена на следующем рисунке.
Обычная кнопка, кнопка с градиентом (граница, на самом деле, прозрачная; цветом она выведена лишь для наглядности), кнопка со странными краями
Теперь, когда мы разобрались с тем, как выглядит градиентная кнопка с прозрачной границей, позвольте мне рассказать о причинах вышеописанных странностей.
Я попробовал добавить к кнопке широкую границу для того чтобы понаблюдать за тем, что из этого получится. Обратите внимание на то, как повторяется градиент, и на то, что его размер соответствует свойству padding кнопки.
Кнопка с широкими границами и градиент
Вот, если хотите поэкспериментировать, пример на CodePen.
Что лучше — height или padding?
▍Фиксированная высота
Предположим, что у нас имеется кнопка, стилизованная следующим образом:
При таком подходе текст не выравнивается по центру. Выглядит всё это так, как показано ниже.
Кнопка, текст которой не выровнен по центру
Но у этого метода есть минусы:
▍Вертикальный внутренний отступ
Существуют шрифты, которые центруются очень хорошо. А есть такие, которые ведут себя иначе. Иногда для достижения цели одно из значений вертикального внутреннего отступа нужно немного изменить. Взгляните на следующую кнопку.
Попытка центровки текста кнопки
Вот CSS-код стилизации этой кнопки:
В этом случае содержимое кнопки выглядит слегка смещённым. Значение верхнего внутреннего отступа нужно немного уменьшить:
Оборачивание содержимого кнопки в тег
В ходе экспериментов я выяснил, что центровка текста кнопок Adobe немного сбита. Вот как это выглядит.
Центровка немного сбита
Я исследовал эти кнопки и заметил интересный паттерн. Содержимое обёрнуто в элемент с указанием фиксированной высоты для кнопки.
Изменение высоты кнопки и автоматическое центрирование её содержимого
Вот и всё. Хочу отметить, что при написании данного раздела мне помогла эта статья.
Кнопки внутри flexbox- или grid-контейнеров
Тут у вас может появиться вопрос о том, какое отношение кнопки имеют к flex- и grid-макетам. Позвольте мне прояснить этот вопрос.
Я работал над разделом одного проекта. Мне нужно было вертикально центрировать его содержимое. Поэтому я использовал flex-макет:
То, что у меня получилось, меня несколько удивило.
Результат использования flex-макета
По умолчанию каждый flex-элемент растягивается в пределах ширины родительского элемента. Именно это и произошло с кнопкой, представленной на предыдущем рисунке. Для того чтобы избежать этой неприятности, нужно настроить свойство align-self :
Вот как кнопка будет выглядеть после этого.
Кнопка выглядит гораздо лучше
Кнопка, растянутая по высоте
Задавая выравнивание кнопки относительно центра контейнера, мы решаем проблему. Вот как теперь будет выглядеть тот же пример.
Решение проблемы растянутой кнопки
Использование единиц измерения em
Единицу измерения em можно использовать для правильной настройки размеров кнопок. Эта единица измерения в такой ситуации весьма полезна. Единица измерения em равна font-size элемента ( px или rem ). Взглянем на следующий пример:
Кнопки разных размеров
А вот фрагменты CSS-кода, в котором используется единица измерения em :
Для кнопок разного типа нужно создать классы, в которых задаётся разный размер шрифта:
→ Вот пример использования подобных кнопок на CodePen
→ Вот моя статья на эту тему. Рекомендую с ней ознакомиться
Анимация и переходы
Для того чтобы пользователю было бы приятнее работать со страницей важно подумать о том, чтобы при наведении мыши на кнопку использовался бы некий переход. Проще всего это сделать, организовав изменение цвета фона. Вот пример на CodePen, где можно увидеть реализацию этой идеи.
Итоги
Мне было очень приятно работать над этим материалом. Его написание заняло у меня больше года. Я счастлив от того, что он, наконец, опубликован. Надеюсь, вы нашли здесь что-то такое, что вам пригодится.
Уважаемые читатели! Известны ли вам какие-нибудь полезные способы работы с кнопками, которые остались за рамками этой статьи?
Кнопка Button
Кнопка запускает действие.
Когда использовать
В современных веб-интерфейсах граница между кнопками и ссылками размыта. Ссылка также может запускать действие. Отличие кнопки в том, что она заметнее, и почти никогда не используется для перехода на другую страницу (то, для чего изначально задумывались гиперссылки).
Не используйте кнопки для перехода на другую страницу.
Описание работы
Кнопка реагирует на наведение курсора — становится темнее. В момент нажатия на кнопку текст и иконка опускаются на 1 px. Действие должно происходить после того, как кнопка отпущена, и только в том случае, если курсор остался над кнопкой.
Название
Название кнопки пишется с заглавной буквы.
Название кнопки должно однозначно говорить о том, что произойдет если на нее нажать. Плохо, если нужно прочитать все содержимое лайтбокса, чтобы понять, что делает кнопка.
Называйте кнопку инфинитивом в совершенной форме — название должно отвечать на вопрос «Что сделать?». Пользователь дает команду компьютеру, ориентированную на результат, а не процесс.
Существуют исключения, когда название кнопки формулируется от первого лица:
Старайтесь не называть кнопку в две строки: делайте кнопку шире или меняйте название.
Многоточие
В гайдлайнах настольных операционных систем рекомендуется заканчивать название кнопки многоточием, в случае если по нажатию будут запрашиваться дополнительные параметры. Многоточие призвано сделать поведение системы более предсказуемым. У этого правила есть ряд недостатков и исключений, которые делают его использование нецелесообразным:
Поэтому в сервисах Контура многоточие в названиях действий не используется. Во многих случаях его можно просто убрать. Если есть опасения, что пользователь побоится нажимать кнопку с необратимым действием — смените название. Из названия должно быть понятно, что действие не финальное.
Или поясните рядом с кнопкой:
Нельзя сокращать название кнопки, если оно не входит:
Иконка
Название кнопки можно дополнять иконкой. Она поможет быстрее найти нужную кнопку в ряду других и быстрее понять, что делает кнопка:
Не ставьте иконки в терминальных кнопках окна/лайтбокса «Сохранить», «Отменить» и т.д.
В панели с большим количеством кнопок, иконки будут создавать лишний визуальный шум. В этом случае оставьте иконки только у самых важных действий.
Размер и расположение
Существует 3 стандартных размера кнопки:
Маленькие — используйте рядом с полями ввода, они соответствуют им по высоте.
Средние — используйте в лайтбоксах и крупных блоках, для действий со списками и таблицами на верхней залипающей панели.
Большие — используйте как главные кнопки экрана или формы для сохранения и отмены, перехода к следующему экрану.
Ширина кнопки задается размером текста внутри нее и стандартными отступами. Нельзя произвольно уменьшать отступы:
Увеличивать отступы можно:
Форма
В мастерах используйте кнопки-стрелки. Такие кнопки бывают двух размеров: средние и большие:
Работа с клавиатурой
Фокус на кнопке визуально отображается только при работе с клавиатурой: если перенести на неё фокус табом появляется синяя рамка. Если кнопка в фокусе, то при нажатии клавиши Enter она нажиматься и выполняет указанное действие.
При клике мышью или тапом на тачскрине кнопка получает фокус, но визуально не отображает его.
Валидация
Кнопка не может быть неправильной или обязательной для нажатия, поэтому следующие состояния не предусматриваются:
Анимация
На время выполнения действия на кнопке или рядом с ней можно размещать спиннер. При этом кнопка блокируется, если она была цветной — превращается в серую.
Лучше располагать спиннер рядом с кнопкой, если есть место.
Если в кнопке есть иконка — можно подменять иконку.
Когда текст кнопки заменяется на спиннер ширина кнопки не должна меняться.
Дизайн
Светло-серый — основной цвет кнопки в наших интерфейсах:
Синий — главное действие на экране. Например, кнопка «Добавить сотрудника» в лайбоксе добавления сотрудника. Или кнопка «Сохранить» на странице редактирования реквизитов. Главная кнопка на экране может быть только одна.
В проектах, в которых синие кнопки не сочетаются с фирменным цветом и остальными элементами интерфейса, могут использоваться кнопки фирменного цвета:
Красный — необратимое или негативное по смыслу действие. Зеленый — действие с положительной окраской. Зеленую кнопку уместно ставить только если рядом есть красная кнопка с обратным смыслом:
Желтый — действия, связанные с оплатой сервисов: