Привлекательные кнопки с помощью магии CSS3

Создать кнопки для сайта можно используя любой графический редактор ( Photoshop, Paint.Net, Gimp и др.), можно, не особо заморачиваясь по поводу изучения свойств CSS, воспользоваться специальными генераторами кнопок, благо таких инструментов выпущено предостаточно в последнее время.
Меня больше привлекает возможность использования новых стандартов CSS3 при создании различных элементов дизайна современных сайтов, в том числе и возможность создания замечательных кнопок без фоновых изображений, исключительно с помощью свойств CSS3. Тем более, что практически все современные браузеры, отлично пережевывают эти самые стандарты и свойства.

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

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

Все крутые и распупыренные мастера веб-дизайна и верстки, проходят мимо, ну, а мы скромные труженики сайтостроения, набравшись терпения, и подключив немного фантазии, рассмотрим подробно, как с помощью CSS3, можно «рисовать», такие кнопки.

Начнем работу с определения html структуры наших кнопок, а в большинстве случаев, это ничто иное, как ссылки с определенным классом, для связки с файлом стилей, в котором обычно и формируется внешний вид того или иного элемента, в нашем случае, это кнопки. Особо мудрить не будем и обзовем этот класс: button, он у нас будет базовым для всех кнопок, разных по форме и цвету.

<a href="#" class="button">Кнопка</a>

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

.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 36px;
  line-height: 35px;
  padding: 0 20px;
  font-size: 14px;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
  background-clip: padding-box;
  border: 1px solid;
  border-radius: 3px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}

 
Для большего понимания, поясню некоторые моменты. В базовом стиле кнопок, использовал легкое скругление углов border-radius: 3px;, текст расположил по центру, что логично, добавил немного тени text-shadow, придав тексту чуточку вдавленный вид. Для создания объемности кнопок, добавил легкую тень всему элементу box-shadow. Использовал background-clip: padding-box; для отображения фона внутри границ.

С базовым стилем, думаю разобрались. Теперь, давайте разукрасим наши кнопки в разные цвета и придадим им движухи при наведении, и нажатии. Для каждого цвета прописываем свой класс, тоже особо не мудрствуя, зеленая кнопка, значит так и пишем: button-green, красная, так красная: button-red. Теперь для каждого цвета остается сформировать стили в css и выставить нужные только вам значения. В примере я использовал, замечательную функцию линейного градиента, с различными цветовыми оттенками, прописав свойства для всех современных браузеров (Firefox, Chrome, Safari, Opera и IE10).

На примере зеленой кнопки, в css это выглядит так:
 

.button-green {
  background: #5ca934;
  border-color: #478228 #478228 #3c6f22;
  background-image: -webkit-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
  background-image: -moz-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
  background-image: -o-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
  background-image: linear-gradient(to bottom, #69c03b, #5ca934 66%, #54992f);
}

 
Для каждого другого цвета меняются только цифровые значения HEX-цветов. В своих экспериментах со значениями, вы всегда можете воспользоваться палитрой «безопасных» цветов, рекомендуемых для экранного дизайна.

Важным моментом при создании динамичных кнопок, является добавление эффекта при наведении .button:hover и видоизменение кнопки при нажатии .button:active. Здесь использовал псевдоклассы в паре с псевдоэлементом :before, прописав ему свойство радиального градиента, также для всех современных браузеров.
 

.button:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
.button:hover:before {
  background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
}
.button:active {
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.button:active:before {
  content: none;
}

 
Для активных кнопок(при нажатии), исключил отображение контента, оставив видоизмененный относительно базового, эффект тени для блока box-shadow. Тем самым еще больше обозначив видимость нажатия активной кнопки.

В веб-дизайне очень популярны кнопки с сильно-скругленными углами, или точнее сказать овальные. С этим в нашем наборе свойств, тоже все очень просто. Добавляем класс rounded-button и прописываем для него одно единственное свойство в css:border-radius: 18px;.
С созданием совершенно круглых кнопок, которые в последнее время также широко используются на сайтах, никаких проблем, все по накатанной. Присваиваем класс, например circular-button и добавляем свойства width: 36px;, для определения ширины кнопки, максимально закругляем углы с помощью border-radius: 65px 65px 65px 65px; и убираем отступы padding: 0;. Все! В комплекте, это выглядит примерно так:
 

.rounded-button{border-radius: 18px; }
.circular-button {
    border-radius: 65px 65px 65px 65px;
    padding: 0;
    width: 36px;
}

 
Все что касается формирования стилей кнопок, на этом пожалуй закончим. Нет смысла приводить в статье весь код CSS, для каждой кнопки в отдельности. Кто заинтересовался темой, может скачать исходники, а там и файл стилей с полным комплектом кода, и сама html-страница примера. Смотрим пример, скачиваем исходники, играемся со значениями свойств CSS и получаем замечательные кнопки к себе на сайт.

Удачи! Дождь не может идти вечно…

Если эта статья показалась Вам интересной, поделитесь ссылкой на нее со своими коллегами и друзьями, нажав на одну из кнопок ниже.