Рубрики
Верстка

Как сделать кнопку в 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, во избежание переопределения стилей.

Как расположение свойств 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, до новых встреч!