Как сделать кнопку в CSS. Обзор основных способов
Всем привет! Как сделать кнопку в CSS? Точнее не так, как сделать КАЧЕСТВЕННУЮ кнопку в CSS? Которая бы смотрелась одинаково хорошо во всех браузерах? В этой статье (являющейся переводом статьи Ахмада Шадида) я постараюсь ответить на этот вопрос.
Для чего нужны кнопки <button> на сайте
Прежде чем начать стилизовать кнопку неплохо бы понять для себя ее предназначение. Итак, согласно спецификации от MDN, кнопка является кликабельным элементом, который может быть использован в формах или любом другом месте документа.
При установке кнопки <button> для организации интерактивности на сайте следует учитывать, что она не работает без действий, назначенных через JavaScript. А это, в свою очередь, влечет некоторые проблемы для устаревших браузеров.
Кнопки или ссылки?
У вебмастеров можно встретить разный подход к использованию кнопок и ссылок для организации интерактивности на сайте. Но семантически правильно — использовать кнопки, а не ссылки.
Ссылка — элемент, семантически предназначенный для перевода пользователя на другую страницу. Кнопка — элемент, предназначенный для нажатия на неё. А еще кнопки чуть проще стилизовать.
По сравнению с гиперссылками, кнопка обладает рядом дополнительных возможностей:
- автоматическое центрирование текста
- возможность более корректно размещать SVG иконки внутри
- возможность задать метод для отправки и включить/отключить валидацию формы (HTML5).
В HTML формах использование кнопки вообще является обязательным.
Но расмотрим подробнее стилизацию кнопок в CSS.
Как сделать кнопку в CSS?
Делаем кнопку универсальной для всех браузеров и систем
.c-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; // сброс толщины границ
border-radius: 0; // сброс скругленных границ
background: #ccc; // универсальный фоновый цвет
}
Задаем основную стилизацию
Основная стилизация кнопки подразумевает задание:
- внутренних отступов (важный параметр)
- параметров шрифта
- границ
- цвета фона
- минимальной ширины (важный параметр)
.c-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; // сброс толщины границ
border-radius: 5px; // установка скругления границ
border-radius: 0; // сброс скругленных границ
background: #4676D7; // фоновый цвет
padding: 8px 16px; // отступы
min-width: 100px; // минимальная ширина
font-family: inherit; // наследуем шрифт
color: #fff; // цвет шрифта
font-size: 1rem; // задаем размер шрифта
}Задаем стили для focus и hover эффектов
Focus — эффект, возникающий, например, при переключении по элементам на сайте с помощью клавиши Tab.
Hover — эффект, возникающий при наведении курсора мыши на кнопку.
Поведение кнопки у обоих эффектов задается псевдоселекторами :focus и :hover соответственно.
При работе с псевдоселекторами :hover лучше помещать ПЕРЕД :focus, во избежание переопределения стилей.
.c-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; // сброс толщины границ
border-radius: 5px; // установка скругления границ
border-radius: 0; // сброс скругленных границ
background: #4676D7; // фоновый цвет
padding: 8px 16px; // отступы
min-width: 100px; // минимальная ширина
font-family: inherit; // наследуем шрифт
color: #fff; // цвет шрифта
font-size: 1rem; // задаем размер шрифта
transition: all .3s ease-in // задаем плавный переход
}
.c-button:hover {
cursor: pointer; // задаем тип курсора
background: #1d49aa;
}
.c-button:focus {
outline: none;
box-shadow: 0 0 0 4px #cbd6ee;
}Задаем стиль для отключенной кнопки
Задание стиля для отключенной кнопки (с атрибутом disabled) лучше также предусмотреть заранее.
.c-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; // сброс толщины границ
border-radius: 5px; // установка скругления границ
border-radius: 0; // сброс скругленных границ
background: #4676D7; // фоновый цвет
padding: 8px 16px; // отступы
min-width: 100px; // минимальная ширина
font-family: inherit; // наследуем шрифт
color: #fff; // цвет шрифта
font-size: 1rem; // задаем размер шрифта
}
.c-button:hover {
cursor: pointer; // задаем тип курсора
background: #1d49aa;
}
.c-button:focus {
outline: none;
box-shadow: 0 0 0 4px #cbd6ee;
}
.с-button::-moz-focus-inner {
border: none; // фикс границы для Firefox
}
.c-button[disabled] {
color: #d2d5db;
background: #6c7589;
cursor: not-allowed;
}Продвинутые технологии
Как сделать кнопку с иконкой в CSS
Кнопки с иконками достаточно популярны на сайтах. Чтобы сделать кнопку в CSS с иконкой, нам понадобится:
- сама иконка в формате svg (а лучше готовый svg спрайт)
- кнопка
Код кнопки с иконкой
<button class="c-button c-button--icon">
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><!-- Icon code --></svg>
<span class="c-button__span">Add to fav</span>
</button>Рассмотрим подробнее конструкцию:
- svg иконка с атрибутом aria-hidden позволяет не отображать ее при прослушивании содержимого страницы с помощью экранного диктора
- span позволяет отключить текст у кнопки на разных размерах экрана или на каких-либо конкретных устройствах
Пример стилизации такой кнопки с иконкой:
.c-button svg {
display: inline-block;
vertical-align: middle;
fill: #fff;
width: 20px;
height: 20px;
margin-right: 0.25rem; // задаем отступ в относительных размерах
}
@media screen and (max-width: 576px) {
.c-button__span {
display: none;
}
}Как сделать кнопку с текстом только для читалок экрана
Если кнопка выполнена с элементом <span> и если необходимо отобразить текст у кнопки только на читалках экрана, можно применить для этого такой класс:
.sr-only {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}Как сделать кнопку с несколькими строками
Порой бывают ситуации, когда необходимо вписать достаточно большой текст в кнопку. В этом случае можно поставить туда два тега <span> и спрятать какой-либо из них от читалок экрана:
<button class="c-button">
<span>Subscribe to our newsletter</span>
<span aria-hidden="true">240K+ subscribers</span>
</button>Как сделать кнопку с градиентом
Чтобы сделать кнопку с градиентом, нужно записать в CSS примерно следующее
.c-button {
display: inline-block;
color: #fff;
background: linear-gradient(to bottom, #00acee, #0072e0); // градиент
font-size: 18px;
font-weight: 500;
padding: 12px 26px;
border-radius: 100px;
/* A transparent border added for the outline button variation */
border: 3px solid transparent; // убираем границы
text-decoration: none;
background-origin: border-box; // чтобы градиент распределялся равномерно вне зависимости от высоты кнопки
}
.c-button--outline {
background: transparent;
color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
}Заключение
В этой небольшой статье я постарался дать ответ на вопрос «как сделать кнопку в CSS». Я специально не стал включать сюда некоторые дополнительные пункты из статьи-оригинала, чтобы не утомлять читателей дополнительным контентом.
С вами был webmaster_zotov, до новых встреч!