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

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

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

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

Все крутые и распупыренные мастера веб-дизайна и верстки, проходят мимо, ну, а мы скромные труженики сайтостроения, набравшись терпения, и подключив немного фантазии, рассмотрим подробно, как с помощью 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 и получаем замечательные кнопки к себе на сайт.

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

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Один комментарий
  1. Дмитрий says:

    Дякую 🙂

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru