Как сделать кнопку в CSS

В этой статье мы расскажем о том как сделать кнопку в CSS?. Но понимание разницы между Flat UI и Material Design не имеет смысла, если вы не знаете, какие компоненты нужно применять. Давайте быстро пробежимся по основам создания кнопок с помощью CSS.

Содержание

Основы CSS кнопок

Существует несколько «нетехнических» стандартов кнопок:

  1. Доступность – имеет первостепенное значение. Пользователи с ограниченными возможностями и старыми браузерами должны иметь простой доступ к кнопкам;
  2. Простой текст – пишите на кнопках простой и короткий текст. Пользователи должны сразу понять назначение кнопки и то, куда она их приведет.

Почти все кнопки в интернете используют эффекты с изменением цвета рамок и теней. Это можно сделать реализовать с помощью псевдоклассов. Мы остановимся на двух из них: :hover и :active. Псевдокласс :hover отвечает за поведение CSS при наведении курсора мыши. Код :active, когда пользователь нажал кнопку мыши, но еще ее не отпустил.

С помощью псевдоклассов можно полностью изменить внешний вид кнопки, но это неудобный подход. Новичкам лучше редактировать основные стили кнопки, почти полностью сохраняя ее внешний вид. В реализации данного элемента управления можно выделить три основных аспекта – цвет, тени и время перехода.

Цвет

Изменить цвет CSS buttons можно с помощью различных свойств: color, background-color и border. Сначала разберемся, как выбрать цвет кнопки:

  1. Комбинации цветов – используйте цвета, которые дополняют друг друга. Colorhexa – отличный инструмент для поиска сочетающихся цветов;
  2. Соблюдение палитры - если вы ищете палитру цветов, зайдите на lolcolors.
Как создать кнопку онлайн? 20 лучших инструментов для создания CSS3-кнопок

Тени

С помощью box-shadow можно добавить тень вокруг объекта. Эта идея реализована в Flat UI и Material Design. Более подробно о свойстве box-shadow можно почитать на MDN.

Время плавного перехода

Свойство transition-duration добавляет временные рамки CSS изменениям. Стили кнопки без плавного перехода моментально меняются на стили псевдокласса :hover, что может отпугнуть пользователя. В следующем примере стиль кнопки плавно меняется (за 0.5 с): на :hover:

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

А смотрится это так:

Код для плавных переходов сложный и старые браузеры по-разному выполняют анимацию. Поэтому нужно добавить префиксы для старых браузеров:

transition-duration: 0.5s /* Обычная запись, работает во всех современных браузерах*/
-webkit-transition-duration: 0.5s; /* Помогает некоторым версиям safari, chrome и android  */
-moz-transition-duration: 0.5s; /* для firefox */

Сброс стилей кнопки

Чтобы браузер установил значение по умолчанию для CSS button style, можно установить пользовательские стили:

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

Лучше применять это к классам элементов кнопки, а не к каждой кнопке по отдельности.

Как сделать спрайт в CSS

Три стиля кнопок

Простой черный и белый

Такие кнопки хорошо сочетаются с множеством различных стилей. Этот эффект основан на контрасте черного и белого.

Рассмотрим код черной кнопки с белым фоном. Чтобы перекрасить кнопку в другой цвет, поменяйте в button стилях CSS все значения white и black местами:

.suit_and_tie {
  color: white;
  font-size: 20px;
  font-family: helvetica;
  text-decoration: none;
  border: 2px solid white;
  border-radius: 20px;
  transition-duration: .2s;
  -webkit-transition-duration: .2s;
  -moz-transition-duration: .2s;
  background-color: black;
  padding: 4px 30px;
}

.suit_and_tie:hover {
  color: black;
  background-color: white;
  transition-duration: .2s;
  -webkit-transition-duration: .2s;
  -moz-transition-duration: .2s;
}

В приведенных выше стилях видно, что свойства font и background-color меняют свои значения со свойством transition-duration.2s. Можно взять цвета своих любимых брендов и создать свою кнопку. Цвета брендов можно найти на BrandColors.

Кнопки Flat UI

Flat UI делает упор на минимализм в HTML button CSS – больше действий, меньше движений. Обычно я перехожу от черно-белых кнопок на Flat UI, когда мой проект начинает обретать форму. Кнопки Flat UI имеют минималистичный вид и подходят под большинство дизайнов.

Улучшим нашу кнопку, добавив ей движения для имитации 3D эффекта.

Мы рассмотрим первую кнопку:

.turquoise {
  margin-right: 10px;
  width: 100px;
  background: #1abc9c;
  border-bottom: #16a085 3px solid;
  border-left: #16a085 1px solid;
  border-right: #16a085 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}
.turquoise:hover {
  opacity: 0.8; 
}
.turquoise:active {
  width: 100px;
  background: #18B495;
  border-bottom: #16a085 1px solid;
  border-left: #16a085 1px solid;
  border-right: #16a085 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
]]

  float: left;
}

У button CSS три состояния: обычное, :hover и :active.

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

Вместо того чтобы указать сплошную рамку border, тут используются свойства border-bottom, border-left и border-right, которые создают 3D-эффект глубины.

Псевдокласс :active часто используется в Flat UI кнопках. Когда наша кнопка становится :active происходит две вещи:

  1. :border-bottom меняется с 3px на 1px. Тень под кнопкой уменьшается, а кнопка опускается на пару пикселей. Это изменение позволяет пользователю почувствовать, что он нажал кнопку;
  2. Цвет фона темнеет, имитируя смещение кнопки от пользователя к экрану. Что также напоминает пользователю о том, что он нажал кнопку.
Как сделать таблицу в CSS?

Во Flat UI ценятся минималистичные движения кнопок, «рассказывающие большую историю». Многие имитируют сдвиг кнопки с помощью :border-bottom. Стоит отметить, что во Flat UI есть кнопки, которые вообще не двигаются, а только меняют цвет.

Material Design

Material Design – подход к дизайну, который продвигает идею передачи информации в виде карточек с различной анимацией для привлечения внимания. Google перечислил на странице Material Design Homepage три основных принципа:

  • Слово «Материальный» - это метафора;
  • Монотонность, графика, агрессивность;
  • Движение передает значение.

Чтобы лучше понять три этих принципа, взглянем на Material Design в действии:

Эти CSS buttons реализуют две основные идеи – свойство box-shadow и Polymer.

Polymer – фреймворк для создания сайтов. С его помощью эффект распространяющейся волны на кнопках добавляется всего одной строкой кода:

<div class="button">
  <div class="center" fit>SUBMIT</div>
  <paper-ripple fit></paper-ripple> /* эта строка добавляет эффект */
</div>

<paper-ripple fit></paper-ripple> — компонент Polymer. Подключив фреймворк в самом начале HTML, мы получаем доступ к его компонентам. Более подробно ознакомиться с возможностями фреймворка можно на сайте Polymer project.

Теперь поговорим о CSS коде, который реализует принципы Material Design:

body {
  background-color: #f9f9f9;
  font-family: RobotoDraft, 'Helvetica Neue';
}

/* Button */
.button {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 32px;
  line-height: 32px;
  border-radius: 2px;
  font-size: 0.9em;
  background-color: #fff;
  color: #646464;
  margin: 20px 10px;
  transition: 0.2s;
  transition-delay: 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.button:active {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  transition-delay: 0s;
}

/* Misc */
.button.grey {
  background-color: #eee;
}
.button.blue {
  background-color: #4285f4;
  color: #fff;
}
.button.green {
  background-color: #0f9d58;
  color: #fff;
}
.center {
  text-align: center;
}

Во всех button CSS используется свойство box-shadow. Удалим весь неменяющийся CSS код и посмотрим, как box-shadow работает:

.button {
  transition: 0.2s;
  transition-delay: 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button:active {
  transition-delay: 0s;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}

Свойство box-shadow используется в button стилях CSS для добавления тонкой темной тени слева и снизу у каждой кнопки. При нажатии тень немного увеличивается и становится светлее. Это движение имитирует эффект 3D тени, которая как бы подпрыгивает от страницы к пользователю. Эффект прописан в стилях Material Design и его принципах.

Кнопки в стиле Material Design можно создать путем совмещения Polymer и box-shadow эффектов.

  • Слово «материальный» – метафора – с помощью свойства box-shadow мы имитируем эффект 3D тени, создаем аналог настоящей тени;
  • Монотонность, графика, агрессивность – больше относится к ярко-голубым и зеленым кнопкам;
  • Значение передается при помощи движений – с помощью Polymer и анимации свойства box-shadow можно создавать множество различных движений, когда пользователь нажимает на кнопку.

В заключение

Черно-белые кнопки довольно просты и понятны. Flat UI кнопки тоже простые и используют мелкие движения и цвета, чтобы «рассказать большую историю». Material Design использует крупномасштабные сложные движения, имитирующие реальную тень, чтобы привлечь внимание пользователя.

Пожалуйста, оставляйте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, лайки, подписки!