Стилизуем кнопки правильно
Если вы создаёте сайт или веб-приложение, там наверняка есть кнопки. А может быть ссылки, выглядящие как кнопки? В любом случае важно правильно их сделать.
Этап 1: Сброс стилей у .
Этап 2: Создание CSS-компонента «button».
Этап 3: Стилизация активного, ховер- и фокус-состояния.
Этап 4: Разбираемся с прилипшим фокусом.
Сброс стилей у
- Если при клике открывается другая страница или изменяется большая часть контента на странице — используйте ссылку ( … ).
- В остальных случаях используйте обычную кнопку ( ).
Использование правильного элемента имеет ряд преимуществ: это благоприятно для SEO (особенно для ссылок!), хорошо для навигации с клавиатуры и улучшает доступность для всех пользователей.
Несмотря на это, разработчики редко используют . По всему интернету можно встретить кучу кнопок, которые вызывают действия через JavaScript, но на деле оказывается, что это , или .
Почему же так редко используется?
- Знание: многие разработчики просто не знают о нём (выучить более 100 HTML-элементов не так-то просто).
- Стилизация: по умолчанию у сложные стили, из-за которых трудно добиться собственного вида.
К счастью, стилизацию поправить не так уж сложно!
/** * Сброс стилей у кнопки. * Придётся немного поработать, чтобы получить нейтральный вид. */ button padding: 0; border: none; font: inherit; color: inherit; background-color: transparent; /* отображаем курсор в виде руки при наведении; некоторые * считают, что необходимо оставлять стрелочный вид для кнопок */ cursor: pointer; >В итоге мы получаем кнопки, которые выглядят как обычный текст.
Минус в том, что при таком подходе необходимо стилизовать все кнопки, или пользователь не распознает их (см.: возможности). Ещё один вариант — использовать этот стиль как миксин (Sass или другой препроцессор) и применять его выборочно:
@mixin button-reset padding: 0; border: none; font: inherit; color: inherit; background-color: transparent; cursor: pointer; > .my-custom-button @include button-reset; padding: 10px; background-color: skyblue; >button type="button"> У меня браузерные стили по-умолчанию. button> button type="button" class="my-custom-button"> А я использую собственные стили. button>Создание CSS-компонента «button»
Теперь, когда мы сбросили дефолтные стили, можем приступить к написанию своих. Вот что мы сделаем:
- «кнопочный» стиль, который можно применять и к ссылкам и кнопкам;
- применять мы хотим выборочно, потому что у нас есть другие ссылки и кнопки с разными стилями на странице.
Напрашивается CSS-компонент. CSS-компонент — это стиль или набор стилей, которые применяются, используя классы, к различным типам HTML-элементов. Вам должно быть знакомо это понятие, если вы используете CSS-фреймворки Bootstrap или Foundation.
Назовём этот компонент .btn (как в Bootstrap, но мы ограничимся одним цветом и размером, чтобы было проще).
.btn /* по-умолчанию для , но пригодится для */ display: inline-block; text-align: center; text-decoration: none; /* создаём маленькие отступы, если кнопки перенесутся на две строки */ margin: 2px 0; /* невидимая граница (понадобится для цвета при наведении/фокусе) */ border: solid 1px transparent; border-radius: 4px; /* размер строится из текста и отступов (без width/height) */ padding: 0.5em 1em; /* убедитесь, что достаточно контраста! */ color: #ffffff; background-color: #9555af; >Вот что у нас получилось:
Вам, возможно, интересно, почему контраст так важен. Ведь кнопки на второй строке выглядят красиво: кому не нравятся пастельные цвета?
Проще говоря: с хорошим контрастом, вы охватите больше пользователей. Некоторые пользователи — слабовидящие. Другие могут просматривать ваш сайт с телефона, на ходу, а под дневным светом труднее читать. Вы можете проверить коэффициент контрастности и почитать о контрастности текста.
Стилизация активного, ховер- и фокус-состояния
Круто, когда ваша кнопка выглядит красиво, но… пользователи будут взаимодействовать с ней, и поэтому требуется визуальный отклик, когда состояние кнопки изменяется.
У браузеров свои стили по-умолчанию для «активного» (т.е. нажатого) и «фокусного» состояния, но, сбросив стили у кнопки, мы избавились от некоторых из них. Не хватает ещё стилей при наведении мышкой, да и в целом хочется, чтобы все стили были видны и соответствовали нашему дизайну.
Начнём со стилей для состояния :active, которое срабатывает при клике кнопки или ссылки:
/* олдскульный эффект «нажатия» + цветовые правки */ .btn:active transform: translateY(1px); filter: saturate(150%); >Мы могли бы изменять цвет кнопки, но я хочу использовать этот эффект при наведении:
/* инвертируем цвета при наведении */ .btn:hover color: #9555af; border-color: currentColor; background-color: white; >Давайте добавим теперь и фокусные стили. Пользователи вашего сайта или веб-приложения могут использовать обычную или виртуальную клавиатуру (на iOS и Android), чтобы «сфокусировать» и активировать поле в форме, кнопки, ссылки и другие интерактивные элементы.
- Для некоторых пользователей это ускоряет заполнение форм.
- Для других использование мышки или тач-указателя невозможно или затруднительно. Они пользуются клавиатурой или специальным устройством.
Во многих веб-проектах, которые я видел, дизайнеры задают стили только для наведения мышки, но не для фокуса. Что же нам делать? Простое решение — использовать :hover стили для :focus.
/* инвертируем цвета при наведении и фокусе */ .btn:hover, .btn:focus color: #9555af; border-color: currentColor; background-color: white; >И когда у нас будут стили для фокуса (только не до!), мы можем сбросить браузерные стили для кнопки:
.btn /* . */ /* все браузеры: сбрасываем дефолтный outline, так как у нас уже есть собственные стили */ outline: none; > /* Firefox: сбрасываем внутреннюю границу при фокусе */ .btn::-moz-focus-inner border: none; >Попробуйте сами: если вы за компьютером, используйте Tab и Shift+Tab для навигации между кнопками:
Разбираемся с прилипшим фокусом
Есть небольшой недочёт. В некоторых браузерах, если кликнуть по ссылке или кнопке, применяются два псевдокласса:
«Активный» псевдокласс убирается сразу после того, как отпускается кнопка мыши или трекпада после нажатия. Но в некоторых браузерах после этого остаётся :focus стиль, пока пользователь не кликнет где-нибудь на странице.
В моих тестах, такое происходит в Chrome (66), Edge (16), и Firefox (60, только для ссылок). Safari (11.1), кажется, поумнее, и там нет такой проблемы.
Мы можем исправить это, используя новый псевдокласс :focus-visible (черновик спецификации). Этот элемент ещё не полностью проработан, но идея в том, что браузеры должны применять состояние :focus-visible только при взаимодействии с клавиатуры или подобных устройств, а не при клике.
Так как :focus-visible ещё не внедрён в браузеры, нам придётся использовать решение на JavaScript, такой как этот полифилл. Он действует по всей странице и добавляет класс focus-visible только элементам, которые получают фокус при использовании клавиатуры.
Давайте изменим стили, чтобы отделить стили :hover от стилей :focus.
/* инвертируем цвета при наведении */ .btn:hover color: #9050aa; border-color: currentColor; background-color: white; > /* убеждаемся, что есть видимые границы при фокусе */ .btn:focus outline: none; box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5), 0 0 0 1.5px rgba(255, 105, 180, 0.5); >Теперь, после того как мы подключили к странице focus-visible.js, он будет добавлять класс js-focus-visible элементу .* Мы можем использовать это, чтобы убрать стили фокуса с элементов, которые не имеют класс _focus-visible*:
/* скрываем фокусные стили, если используется не клавиатура */ .js-focus-visible .btn:focus:not(.focus-visible) box-shadow: none; >Более простой способ — определить фокусные стили только для класса focus-visible, но если полифилл неактивен (например, если JS не смог загрузится), то стили не применятся.
Окончательный вариант можно посмотреть на сайте Флоренса Вёршелда.
Следить за обновлениями можно через RSS или телеграм-канал.
Как убрать фон у кнопки?
Сделал кнопку с изображением , но появилась белая обводка. Как её убрать?
body
Отслеживать
13.1k 2 2 золотых знака 21 21 серебряный знак 37 37 бронзовых знаков
задан 17 фев 2018 в 20:22
1 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
Убрать у кнопки внутренние отступы и рамку padding: 0; border: 0;
17 фев 2018 в 20:33
стандартный ресетер для кнопок выглядит как-то так < margin: 0; padding: 0; border: 0; outline: none; background-color: transparent; >дальше уже сами решайте что из этого является причиной ваших проблем.
Стилизуем кнопки правильно
Кнопки есть практически в любом приложении. В их роли могут выступать самые разные элементы — собственно кнопки, ссылки и даже простые спаны. В любом случае важно правильно их оформить. В этом руководстве мы займемся созданием CSS-компонента кнопки.
Сброс стилей элемента
- Если при клике происходит переход на другой URL или изменяется большая часть контента на странице, используйте ссылку ( . );
- В остальных случаях подойдет обычная кнопка ( ).
Выбор правильного элемента имеет несколько преимуществ: это SEO-friendly и делает ваш сайт более доступным при работе с клавиатуры и для скринридеров.
Однако разработчики редко используют элемент . На большинстве сайтов кнопки представлены тегами , или . В чем причина такой нелюбви?
- Незнание. Некоторые разработчики даже не догадываются, что тег button можно использовать вне форм.
- Сложности стилизации. У кнопок очень много стилей по умолчанию, которые мешают созданию кастомного дизайна.
К счастью, у нас есть CSS reset. Давайте сбросим стили кнопки и сделаем ее похожей на обычный текст:
Минус этого подхода заключается в том, что стиль сбросился у ВСЕХ кнопок, и теперь посетитель сайта не сможет опознать их на странице.
Можно воспользоваться препроцессором (SCSS) и написать миксин для использования в нужных местах:
Создание CSS-компонента кнопки
Теперь, когда мы удалили все лишнее, давайте определим собственные стили для кнопки. Создадим для этого отдельный класс .btn , который можно будет указать и для button , и для a , и для любого другого элемента.
Внимание: при разработке CSS-компонента кнопки важно учитывать, что он может быть применен к ссылкам. Значит, необходимо изменить также дефолтные свойства ссылок.
Избегайте использования для кнопок цветов с малым контрастом. Часть ваших пользователей может иметь проблемы со зрением, а другая изучает сайт в неблагоприятных условиях (например, на телефоне под светящим солнцем) — не затрудняйте им жизнь.
- Проверка коэффициента контраста
- Почему контраст так важен?
Стилизация различных состояний
Кнопка уже выглядит неплохо, но кое-чего не хватает. Это интерактивный элемент, имеющий несколько состояний. Мы должны стилизовать и их.
У браузеров есть собственные дефолтные стили для состояний :focus (фокус на кнопке) и :active (нажатие), но часть из них мы уже сбросили. Не забудем также про состояние :hover (наведение курсора).
- Для нажатой кнопки создадим олдскульный эффект «утопления» с небольшим изменением насыщенности.
- При наведении курсора поменяем местами цвета фона и текста и добавим рамку.
- Для обозначения фокусировки используем такой же стиль.
Обратите внимание: стили фокуса очень важны. Многие пользователи по разным причинам пользуются клавиатурой для навигации по странице. Только стилизованный :focus помогает им понять, где они находятся в данный момент.
Только после того как мы позаботились о собственном оформлении фокуса можно убрать у кнопки дефолтные браузерные стили ( outline ).
Разбираемся с «липким» фокусом
Осталось решить еще одну небольшую проблему.
В ряде браузеров когда вы кликаете на ссылку или кнопку, она получает два псевдокласса: :active и :focus .
:active убирается сразу после того, как вы перестали нажимать на кнопку мышки или трекпад. Но :focus зачастую остается до тех пор, пока вы не кликнете на какой-нибудь другой элемент страницы.
Это поведение можно пофиксить с помощью нового псевдокласса :focus-visible.
Это свойство еще не принято официально, но идея заключается в том, что состояние :focus-visible устанавливается для элемента только при получении фокуса с клавиатуры (а не при клике).
При необходимости можно использовать JS-полифилл.
Давайте разделим состояния :hover и :focus в нашем компоненте:
.btn:hover < color: #9050AA; border-color: currentColor; background-color: white; >.btn:focus
Теперь подключим полифилл focus-visible.js. Он добавит элементу body класс js-focus-visible . Используем его, чтобы удалить тень с элементов, у которых нет класса focus-visible (то есть тех элементов, на которых сфокусировались не с клавиатуры):
.js-focus-visible .btn:focus:not(.focus-visible)
Кажется, было бы проще установить стили только для .focus-visible элементов, однако, так мы лишимся фоллбэка на тот случай, если скрипт не сработает.
:disabled , :enabled
Эта кнопка серая. Она не доступна для клика. Как написать селектор на основе состояния элемента?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 1 августа 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдоклассы :disabled и :enabled помогают стилизовать интерактивные элементы — на которые можно и нельзя нажать.
Легко применяются к любым элементам, которым можно задать атрибут disabled : , , , , , , , и .
Пример
Скопировать ссылку «Пример» Скопировано
Часто требуется, чтобы на кнопку отправки формы нельзя было нажать, пока не заполнены все поля этой формы. Проще всего заблокировать кнопку атрибутом disabled . Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс :disabled .
Кнопка будет полупрозрачной:
button:disabled opacity: 0.5;>button:disabled opacity: 0.5; >
Псевдокласс :enabled , наоборот, поможет стилизовать все доступные для взаимодействия элементы. По факту его чаще всего не указывают, потому что записи с ним и без него, как правило, равноценны: .input = .input : enabled .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Любому селектору, указывающему на интерактивный элемент, дописываем двоеточие и указываем одно из ключевых слов: enabled или disabled .
Как понять
Скопировать ссылку «Как понять» Скопировано
Браузер ориентируется на атрибут disabled и, в зависимости от его наличия или отсутствия, добавляет элементу состояние enabled — доступен, или disabled — недоступен.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Даже если дизайнер забыл про неактивное состояние, обязательно прописывайте его в стилях, чуть приглушая фоновый цвет или делая элемент полупрозрачным — чтобы пользователь точно знал, что с этим элементом взаимодействовать нельзя.
�� enabled чаще всего не используется, потому что все интерактивные элементы по умолчанию доступны (включены). Это значит, что прописав стили для селектора .input , вы закрываете сценарий с активным элементом.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом disabled , потому что он сразу же отключает возможность нажать на этот элемент без дополнительных стилей. И, ориентируясь на него, гораздо удобнее прописывать стили для неактивных элементов, используя псевдокласс disabled .
Код для кнопки из моего последнего проекта:
Стили для активной кнопки в обычном состоянии:
.additional-btn padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none;>.additional-btn padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none; >
Стили для кнопки при наведении курсора или клике:
.additional-btn:active,.additional-btn:hover color: #FF5050; transition: none;>.additional-btn:active, .additional-btn:hover color: #FF5050; transition: none; >
Стили для кнопки, когда она неактивна:
.additional-btn:disabled cursor: default; color: #A44234;>.additional-btn:disabled cursor: default; color: #A44234; >