Главная » Правильная стилизация кнопок на CSS

Правильная стилизация кнопок на CSS


31.07.2021, 11:03
Стили кнопки по умолчанию

К примеру, смотрим стили по умолчанию из таблицы стилей пользовательского агента Google Chrome.

Код

button {
  -webkit-writing-mode: horizontal-tb !important;
  -webkit-appearance: button;
  border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
  border-style: solid;
  border-width: 1px;
  padding: 1px 7px 2px;
  text-rendering: auto;
  color: initial;
  display: inline-block;
  text-align: start;
  margin: 0em;
  font: 400 11px system-ui;
}


Так выглядит кнопка, оформленная этими стилями, причём её вид может отличаться, в зависимости от операционной системы пользователя

Переопределяем свойство appearance, чтобы убрать кастомизацию оформления кнопки операционной системой:

Код

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

При этом внешний вид кнопки в разных браузерах всё ещё отличается.

Делаем дополнительно сброс стилей для границ кнопки, её фона и закруглений:

Код

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: #ccc;
}

Теперь, когда мы добились идентичного отображения кнопки в разных браузерах, оформим её на свой вкус.

Базовый дизайн кнопки

Задаём стили для кнопки:

Код

button {
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #4676D7;
  color: #fff;
  padding: 8px 16px;
  font-size: 16px;
}


Так будет выглядеть кнопка

Теперь нужно добавить стили для кнопки для её различных состояний: при наведении, фокусировке и отключенной кнопке.

Причём, в CSS-стилях первым должно быть hover, а затем focus

Код

  button:hover {
  background: #1d49aa;
  }

  button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
  }

Получаем три состояния для кнопки:



Отключить кнопку можно, например, добавив для неё атрибут disabled и после этого прописать свойства для него в css-стилях:

Код

<button disabled>Button</button>

Код

button[disabled] {
  color: #d2d5db;
  background: #6c7589;
  cursor: not-allowed;
}


Отключенная кнопка

Задаём минимальную ширину для кнопки с помощью min-width (на случай, если текст кнопки будет очень короткий):

Код

button {
  min-width: 100px;
}


Благодаря тому, что мы задали минимальную ширину для кнопки, она не выглядит очень маленькой из-за короткого текста кнопки

Также добавим горизонтальные отступы слева и справа, на случай, если текст кнопки изменится и станет больше:

Код

button {
  min-width: 100px;
  padding-left: 10px;
  padding-right: 10px;
}

Шрифт для кнопки

По умолчанию кнопка не наследует шрифт от html или body, исправляем это:

Код

button {
  font-family: inherit;
}

Заменяем курсор на иконку руки при состоянии наведения на кнопку:

Код

button {
  font-family: inherit;
  cursor: pointer;
}

Добавляем на кнопку иконку

Например, иконки шрифта FontAwesome можно добавить так:

Прописываем в шапке ссылку на CSS-стили FontAwesome:

Код

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Код кнопки с иконкой:
Код

  <button>
  <i class="fa fa-headphones" aria-hidden="true"></i>
  Кнопка с иконкой
  </button>

Можно задать дополнительно отступ от иконки справа:

Код

button i {
  margin-right: 0.25rem;
}


Иконка автоматически выровнена по середине вертикали, остаётся только добавить отступ от неё до текста кнопки справа

Если нужна кнопка только с иконкой, без текста, ширину кнопки меняем на:

Код

min-width: initial;

а в коде кнопки оборачиваем текст в тег span, для которого в стилях прописываем скрытие текста:

Код

  <button>
  <i class="fa fa-headphones" aria-hidden="true"></i>
  <span>Это кнопка</span>
  </button>

Код

button span {
  display: none;
}

Отступ у иконки справа нужно убрать.


Кнопка с иконкой без описательного текста


Особенности кнопки-ссылки

На странице сайта кнопки могут выглядеть одинаково, но по HTML-структуре быть якорной ссылкой или элементом button. Всё дело в одинаковом классе, применяемом для обоих случаев.

Однако, для кнопки-ссылки дополнительно в CSS-свойствах нужно добавить:

Код

  text-decoration: none;
  text-align: center;

Если для кнопки-ссылки добавить помимо ссылки на файл ещё и атрибут download, получим инициирование загрузки файла при нажатии на эту кнопку:

Код

<a href="price.pdf" class="button" download>Скачать прайс в формате PDF</a>

Можно оформить стиль кнопки при наведении на неё таким образом, чтобы кнопка отображалась с прозрачным фоном и закрашенной границей:



Для этого нужно лишь добавить стили для кнопки для её нормального состояния и состояния при наведении на неё:

Код

button {
  border: 2px solid transparent;
  /* тут ещё остальные стили для кнопки */
}

button:hover {
  background: transparent;
  color: #222;
  border-color: #4676d7;
}

Кнопка с градиентом в качестве фона

Такую кнопку делаем так:

Код

<button class="button_two">Это кнопка</button>

Код

.button_two {
  display: inline-block;
  color: #fff;
  background: linear-gradient(to bottom, #00acee, #0072e0);
  font-size: 18px;
  font-weight: 500;
  padding: 12px 26px;
  border-radius: 100px;
  border: 3px solid transparent;
  text-decoration: none;
  background-origin: border-box;
}

Для состояния при наведении курсора мыши на кнопку, можно применить красивый эффект с тенью:

Код

.button_two:hover {
  box-shadow: 0 0 0 6px rgba(0, 172, 238, 0.2), 0 8px 10px 8px rgba(0, 172, 238, 0.2);
}

Посмотреть демо

КОММЕНТАРИИ (0)

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]