You might also like
Кнопки — один из наиболее часто используемых элементов на веб-страницах. Они могут использоваться для инициирования таких процессов, как отображение данных, открытие модальных окон или отправка форм. В этой статье, которая является переводом нашей публикации, объясняются тонкости стилизации элементов кнопок и то, как разработать кнопки, которые правильно работают во всех браузерах. В нем также описано большинство часто используемых стилей кнопок. В нем также обсуждаются некоторые проблемы, возникающие при использовании кнопок.
Стили, применяемые к кнопкам по умолчанию
Разговор о "стилях по умолчанию" может показаться кому-то элементарным, но то, о чем мы говорим на самом деле, довольно интересно. Это стандартная таблица стилей кнопок для GoogleChrome User Agent.
Кнопки по умолчанию выглядят следующим образом Стиль по умолчанию не изменяется во время рендеринга.
Простая кнопка со стилем по умолчанию
Сначала переопределим свойства внешнего вида. Используется для настройки под конкретную платформу. Внешний вид кнопок при таком подходе основан на стиле, применяемом в операционной системе пользователя.
Далее рассмотрим, как кнопки выглядят в разных браузерах после сброса свойств внешнего вида.
Свойства отображения для этих кнопок установлены на none
Далее нам нужно сбросить еще несколько свойств, прежде чем мы перейдем к фактической настройке. Это border, border-radius и background.
Кнопки после сброса свойств
Восстановив стиль кнопок по умолчанию, мы можем продолжить. В частности, я хочу объяснить, как настроить кнопку на основе требований к ее дизайну.
Стилизация обычных кнопок
Давайте начнем с базового примера. Мы рассмотрим конфигурацию обычной кнопки, которая отображает только текст. На следующей диаграмме показана простая структура кнопки.
Цвет текста, размер шрифта, фон, округление и отступы
Используя приведенный выше код CSS, вы можете создать кнопку, подобную той, что показана на предыдущем изображении. После того как вы определили основной стиль кнопки, необходимо обратить внимание на внешний вид кнопки в различных состояниях.
Нормальный, сфокусированный, наведенный и выключенный.
Стиль, применяемый к кнопке, когда кнопка наведена и находится в фокусе
Чтобы сообщить пользователям, что кнопка наведена, важно стилизовать ее соответствующим образом для этого события. То же самое относится к изменению внешнего вида кнопки, когда пользователь заходит на страницу с клавиатуры и кнопка имеет фокус.
Это подчеркивает важность добавления стиля к кнопке, когда мышь наведена на нее (hover) или когда она имеет фокус (focus).
Если стиль hover добавлен до стиля focus, все стили будут работать правильно. Эта проблема возникает, когда стиль focus добавляется перед стилем hover. Когда элемент щелкается, стиль focus не отображается, только вид кнопки, определенный в стиле hover.
Лучше, если сначала будет стиль hover, а затем стиль focus!
Это правильный порядок стилей:.
▍ Минимальная ширина кнопки
Для создания кнопки, которая хорошо выглядит, требуется определенная ширина. Важно подумать об этом заранее и учесть длинные и короткие подписи, которые могут быть включены в кнопку. Благодаря min-width вы можете установить минимальную ширину для вашей кнопки. Ниже приводится моя статья, в которой я подробно анализирую его и другие подобные характеристики.
Взгляните на следующее изображение. Здесь вы можете увидеть различные кнопки с разной длиной текста на английском и арабском языках. Если минимальная ширина кнопки не установлена, то при маленькой надписи кнопка будет казаться очень маленькой. Лучше избежать этого и использовать свойство минимальной ширины.
Стоит определить минимальную ширину кнопки
Внутреннее вдавливание.
Избежать определения горизонтальных внутренних углублений на кнопках — привлекательная идея. Кнопки имеют определенную ширину. Это означает, что между краем кнопки и текстом, который в ней отображается, должно быть достаточно места. Правильно; нет, не так. Применение этой идеи может иметь негативные последствия, если надпись на кнопке изменится.
Посмотрите на следующую схему.
Рекомендуется назначить внутренний отступ для кнопки
Обратите внимание, что если внутренний отступ не подобран для кнопки, текст, размещенный над ней, может оказаться очень близко к границе. даже если кнопка имеет минимальную ширину. В нижней части изображения используются свойства padding и minimum width. Это обеспечивает хорошую видимость кнопки без указания длины текста, отображаемого на кнопке.
Семейство шрифтов, используемое для шрифта кнопки.
Элементы формы по умолчанию не наследуют семейство шрифтов, назначенное для OR. Интересно отметить, что я написал 70% этой статьи и заметил, что, во-первых, я не изменил шрифт кнопок, используемых в демонстрационных целях. Во-вторых, я ничего об этом не писал.
Чтобы решить эту проблему, необходимо установить свойство Font-Family в значение inherit.
КнопкиСтиль кнопки выключения.
Чтобы сообщить пользователю, что кнопка выключена, можно настроить кнопку CSS, добавив атрибут disabled.
Ниже приведен HTML-код, описывающий отключенную кнопку.
Ниже приведен код CSS, формирующий такую кнопку.
Когда кнопка выключена, она не может принимать фокус клавиатуры и не может быть удалена из дерева доступности страницы.
Отображение указателя мыши при наведении на кнопку BUTTON
Стандартный индикатор мыши при наведении на кнопку выглядит как стрелка. Мне нравится этот ответ на Stackoverflow: "Кнопки — это традиционные элементы управления офисом. Это среда, в которой в эпоху Интернета никогда не использовались индикаторы в форме руки. Когда веб-сайты начали использовать те же элементы управления, разработчики просто пытались заставить кнопки отображаться в офисных приложениях".
Чтобы обойти обычное поведение указателя, рекомендуется заменить стандартный курсор со стрелкой на бегунок со стрелкой.
Стандартный стрелочный переводчик и улучшенный стрелочный переводчик.
Теперь, когда основы работы с кнопками объяснены, следует полный код CSS, включающий все вышеперечисленное.
В следующем разделе описаны различные стили и типы кнопок, которые могут быть использованы в вашем проекте.
Кнопки со значком
На кнопке может потребоваться значок. Это может быть необходимо для того, чтобы выделить кнопку или лучше проинформировать пользователя о ее роли. Важно, чтобы пользователи с ограниченными возможностями имели доступ к иконкам.
Пример кнопки с пиктограммой
На предыдущем изображении показана кнопка с пиктограммой. Ниже приведен код, который добавляет атрибут Aria-Hidden к значку, чтобы удалить значок из дерева доступности. Мы также добавили функцию Focusable = "False", чтобы ICON не фокусировался в IE.
Обратите внимание, что для вертикального выравнивания значка и содержимого кнопки был использован стиль Vertical Align Style: center.
HTML-код для этой кнопки выглядит следующим образом
То, что мы только что видели, может работать, если только вы не решите скрыть текст кнопки и сделать ее кнопкой только с иконкой. Как вы это делаете? Во-первых, текст должен быть обернут в элемент span, например. Затем можно улучшить внешний вид кнопки. Вот HTML-описание кнопки:.
Теперь вам остается только скрыть элемент span, и он может выглядеть готовым к работе.
При таком подходе текст исчезает, а иконка остается, что очень плохо для доступности контента. Кнопки "не видны" для инструментов чтения с экрана. Например, в MacOS говорится, что такие кнопки — это просто "кнопки", а не детали. Существует несколько решений этой проблемы
Используйте svg иконки
Предпочтительно использовать SVG иконки. Рекомендуется собрать все SVG-описания графики в файле и соединить их с меткой, используя каждую иконку. Вот пример.
Ниже приведен код для SVG-сигнала, описание которого хранится в файле iCons.svg и имеет идентификатор #facebook. Такой подход снижает уровень повторений в коде.
Регулировка размера кнопки значка CONIC
Текст кнопки больше не отображается, а для кнопки установлена минимальная ширина CSS, поэтому ширина кнопки не соответствует размеру иконки. Чтобы учесть эту особенность, рекомендуется явно определить ширину кнопки с помощью пиктограмм.
Кнопки с минимальной шириной CSS и свойствами минимальной ширины CSS
Визуально скрыть текст.
Элементы, использующие популярный класс .sr-and-o-lytly, можно визуально скрыть, убрав их с экрана, но оставив читаемыми с экрана.
Исправьте размер шрифта на 0
Если свойство font size установлено в 0, элемент span не будет занимать место на экране. Другими словами, она будет скрыта.
Однако решение здесь, как правило, связано с использованием классов .SR-only. С моей точки зрения, это выглядит более разумно. Техника скрытия текста путем изменения размера шрифта до 0 кажется своеобразным хаком.
Использование атрибута Aria-Label
Если у кнопки нет элемента, должен существовать способ ее обойти. Один из способов — использовать функцию Aria-Label. Эта функция может быть назначена самому элементу или элементу.
Чтобы узнать больше о кнопках с пиктограммами, см. эту статью.
Кнопки, содержащие несколько строк текста
В некоторых случаях может потребоваться, чтобы кнопка содержала две строки текста. Примеры таких кнопок показаны ниже.
Кнопка с двумя строками текста
На форме подписки показана кнопка, содержащая основной и вспомогательный текст. Как создать такую кнопку, не забывая о доступности для людей с ограниченными возможностями? Соответствующий HTML-код выглядит следующим образом.
Программы для чтения экрана "выдают" эту кнопку как "Подпишитесь на 240k+ подписчиков". Если пользователи прослушают это, они могут быть сбиты с толку, поскольку два текста на кнопке ничем не разделены. Посмотрите на снимок экрана хрома, чтобы проверить доступность элемента.
Изучите доступность изделия к хрому.
Чтобы избежать путаницы пользователей, мы предпочитаем скрывать вторую строку в текстовом ридере. Это можно сделать с помощью атрибута ARIA-Hidden элемента.
Если по каким-то причинам HTML-макет не может быть изменен, существует другой способ добавить дополнительный текст на кнопку. Мы нашли решение этой проблемы на сайте журнала Smashing Magazine. Он заключается в использовании псевдоставок для позиционирования контента. При таком подходе у программы чтения с экрана, кажется, нет ничего лишнего. Код CSS для этого решения выглядит следующим образом
Ссылки () или кнопки ()?
Когда следует использовать ссылки, а когда — кнопки? Сначала давайте поговорим о том, чем они отличаются.
Отношения
▍.
Без встроенного JavaScript элемент сам по себе не выполняет никаких действий. Pseudois: Hover, :Focus и :Active. Что касается доступности, то кнопки можно использовать с клавишами Enter и Space на клавиатуре. Программы чтения экрана "читают" содержимое кнопок.
Что касается дизайна, то на сайте могут быть кнопки одного стиля с разным HTML-кодом, используемым для их описания. Поэтому код форматирования CSS для класса .c-button должен быть написан таким образом, чтобы его можно было использовать для обоих классов. Рассмотрим следующий пример.
Использование ссылок и кнопок
Обратите внимание, что "кнопки" на странице формируются таким же образом. Однако первое является элементом, а второе — его элементом. Это означает, что кнопка не обязательно выглядит как элемент HTML — она может выглядеть как .
Есть два дополнения к стилю кнопок .C. Это свойства оформления текста. и Text Align: center;. По умолчанию текст ссылки подчеркивается, поэтому это необходимо изменить, изменив используемый класс. Для элементов HTML также важно центрировать содержимое кнопки.
Предметы не обязательно должны выглядеть как пуговицы.
Мне нравится этот пример реализации аккордеон-бара с учетом требований доступности контента. Если изначально предположить, что JavaScript недоступен, то в результате разметки получается следующее
Содержание страницы, когда JavaScript недоступен.
Вот HTML-код для такой маркировки
Когда JavaScript недоступен, приведенная выше разметка определяет элементы, которые можно сворачивать и разворачивать. Это достигается путем создания и добавления кнопки.
Содержимое страницы, на которой доступна функциональность JavaScript.
В этом случае использование элементов — правильный выбор, поскольку кнопки решают проблему расширения и блокировки текста.
Загрузите кнопку ▍
Предположим, у вас есть документация. Вам нужно объяснить ссылку, чтобы загрузить ее. Какой предмет вам нужно использовать для выполнения этого задания? Вот ссылка! Нажмите, чтобы добавить функцию загрузки к ссылке, и содержимое будет загружено.
Ссылка для загрузки документа, оформленная в виде кнопки.
Код для этой ссылки выглядит следующим образом.
В этом подходе ссылка моделируется как кнопка, которая функционирует, используя только семантическую структуру HTML.
Кнопки с обводкой
При наведении курсора мыши обычная кнопка меняется на кнопку с линией обводки
На предыдущей схеме показана кнопка, которая превращается в кнопку с росчерком при наведении на нее курсора мыши. Каков наилучший способ достижения этой цели? Во-первых, стиль кнопки должен иметь свойство border. По умолчанию используется прозрачный цвет. При указании границы граница кнопки не перерисовывается при наведении курсора мыши на кнопку.
При таком подходе, если есть кнопка и мышь наведена на нее, то отрисовывается граница. В то же время фон кнопки становится прозрачным.
Градиентные кнопки
Когда я работал над статьей о размещении элементов, мне понадобилась кнопка, которая должна была заполняться градиентом.
Я хотел получить нечто подобное изображению ниже.
Кнопка градиентной заливки и ее вариация с рисунком линии мозга.
Существует два варианта кнопки — кнопка с градиентной заливкой и кнопка с обводкой. Чтобы добиться такого вида кнопки, к основной (градуированной) кнопке необходимо добавить прозрачную рамку. Этот контур виден только для кнопок со штрихом.
Здесь все выглядит логично, но в процессе я столкнулся со странной проблемой. Я даже попытался решить эту проблему, обратившись за помощью к пользователям Twitter. Эта проблема показана на следующей диаграмме.
Обычная кнопка, градиентная кнопка (контур на самом деле прозрачный). Они показаны цветом для наглядности) и кнопка со странными краями.
Теперь, когда мы знаем, как выглядит градуированная кнопка с прозрачной границей, мы можем объяснить причину странной ситуации, описанной выше.
Каждый элемент имеет свойство background-origin, которое определяет область, где размещается фоновое изображение. По умолчанию для этого параметра установлено значение padding-box. При таком подходе размер градиента подгоняется под размер элемента с учетом толщины рамки.
Мы добавили широкое поле к кнопке, чтобы посмотреть, что произойдет. Обратите внимание, как повторяется градиент и как его размер соответствует свойствам padding кнопки.
Кнопки с широкими границами и градиентами
Чтобы решить эту проблему, необходимо задать область размещения фонового изображения с помощью функции background-origin: border-box;. Измените стандартный padding-box на border-box:.
Вот пример из CodePen, если вы хотите поэкспериментировать.
Что лучше — height или padding?
Каждая кнопка имеет высоту. Чтобы управлять высотой кнопки, либо явно задайте свойство height, либо установите свойство padding в верхней и нижней части кнопки. Обратите внимание, что описанные ниже проблемы возникают в основном из-за.
▍ Фиксированная высота.
Предположим, у вас есть кнопка со следующим стилем: ▍ Фиксированная высота.
При таком подходе текст не центрируется. Это будет выглядеть следующим образом.
Кнопка с текстом, расположенным не по центру.
Чтобы исправить это, выровняйте текст с помощью свойств padding или line-height. Вы можете выровнять текст по центру, установив высоту линий равной или близкой к высоте кнопки.
Однако у этого метода есть и недостатки.
- Текст кнопки не всегда правильно центрируется. Изменение шрифта может привести к нарушению выравнивания.
- Если значение, указанное в свойстве font-size, увеличивается, то новое значение свойства line-height должно быть скорректировано.
- Свойство line-height может вести себя по-разному для текста, отображаемого на разных языках. Это важно для многоязычных веб-сайтов.
- Если у вас есть кнопка с двумя строками текста, этот метод не подходит для выравнивания содержимого кнопки.
▍ Вертикальный внутренний отступ
Если padding-top и padding-bottom заданы одинаково, ожидается, что содержимое кнопки будет выровнено по центру. Это действительно зависит от ситуации.
Есть некоторые шрифты, которые очень хорошо центрируются. Другие работают по-другому. Для достижения цели вам может понадобиться немного изменить одно из значений внутреннего вертикального отступа. Нажмите кнопку ниже.
Мы пытаемся отцентрировать текст на кнопке
Вот код CSS для установки этой кнопки
В этом случае содержимое кнопки будет отображаться немного смещенным от центра. Значение отступа вверху необходимо немного уменьшить.
Обертывание содержимого кнопки меткой
Эксперименты показали, что текст на кнопке Adobe расположен немного неправильно. Внешний вид выглядит следующим образом.
Выравнивание немного нарушено.
Изучая эти кнопки, мы заметили интересную закономерность. Содержимое обернуто в элемент с фиксированной высотой кнопки.
В случае с элементами по умолчанию элемент центрируется. При изменении высоты содержимое автоматически центрируется без каких-либо свойств padding и т.д. Это анимационная демонстрация поведения.
Измените высоту кнопки, и ее содержимое будет автоматически выровнено по центру
Однако, если речь идет о ссылке, например, кнопке, необходимо центрировать элемент. Чтобы настроить эту функциональность, вы можете использовать метод компоновки flexbox.
Вот и все. Я хотел бы отметить, что эта статья помогла мне при написании данного раздела.
Кнопки внутри flexbox- или grid-контейнеров
Теперь у вас может возникнуть вопрос о том, как кнопки связаны с flex и grid макетами. Позвольте мне прояснить этот вопрос.
Я работал над одним из разделов проекта. Мне нужно было отцентрировать содержимое по вертикали. Поэтому я использовал гибкий макет.
То, что я получил, меня немного удивило.
Результаты использования гибкого макета
По умолчанию каждый гибкий элемент растягивается на ширину своего родительского элемента. Именно это произошло с кнопкой на предыдущем изображении. Чтобы избежать этой неприятности, необходимо настроить свойство align-self.
Кнопка будет выглядеть следующим образом
Кнопка выглядит намного лучше.
Другая распространенная проблема возникает, когда кнопки размещаются в flex-контейнере со свойством flex-direction:row, установленным по умолчанию. Высота кнопки подгоняется под высоту родительского элемента. Чтобы исправить эту проблему, необходимо использовать свойство align-self кнопки или свойство align-items flex-контейнера.
Кнопки с вытянутой высотой
Настройка выравнивания кнопки относительно центра контейнера решает проблему. Аналогичный пример показан ниже.
Устранение проблем с растянутой кнопкой
Использование единиц измерения em
С помощью блока em можно соответствующим образом настроить размер кнопки. Эта единица измерения очень полезна в данном случае. Единица измерения em совпадает с размером шрифта элемента (px или rem). Возьмем следующий пример.
В данном случае, padding составляет 16*0,5 px.
Предположим, что в вашем проекте есть три кнопки: обычная, средняя и большая. Используя единицы em для указания padding, width, height и margin, вы можете создавать кнопки, размер которых очень легко изменить. Выглядит и ощущается следующим образом
Кнопки разных размеров
Фрагмент кода CSS, в котором используется блок em, выглядит следующим образом
Для разных типов кнопок необходимо создать классы, определяющие разные размеры шрифта.
→ Ниже приведен пример использования подобной кнопки в CodePen
→ Это моя статья. Я рекомендую прочитать его.
Анимация и переходы
Чтобы сделать страницу более удобной для пользователя, следует рассмотреть возможность использования какого-либо перехода, когда пользователь наводит курсор на кнопку. Самый простой способ сделать это — изменить цвет фона. Вот пример CodePen, в котором вы можете увидеть реализацию этой идеи.
Итоги
Мне было очень весело работать над этим произведением. На его написание у меня ушло больше года. Я рад, что она наконец-то опубликована. Надеюсь, вы найдете в нем что-то, что сможете использовать.
Уважаемые читатели! Знаете ли вы какие-либо полезные способы манипулирования кнопками, которые выходят за рамки этой статьи?
