Тенденция делать всё максимально динамичным и ярким - это реалии сегодняшних дней. Каждый элемент дизайна сайта вскоре не будет оставлен без внимания. Сегодня мы поговорим об невероятно интересном и красивом наборе эффектов для кнопок. Думаю мало кто задумывается об эффектах при нажатии, но если создаёшь, к примеру, продающую страницу, то на решение потенциального покупателя может повлиять как размер кнопки, так и цвет, и даже сам эффект при клике.
Вот ещё несколько статей по теме:
Кнопки для сайта;
Оригинальные чекбоксы в стиле IOS7;
Ещё больше эффектов для ссылок;
Эффект волны при клике.
Как и в других наборах, принцип добавления прост – можно просто скопировать необходимые строки кода, но мы сегодня рассмотрим добавление кнопки на одном из примеров. И для начала нам нужно подключить CSS файлы стилей между тегами head.
<link href="css/normalize.css" type="text/css" rel="stylesheet" />
<link href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
<link href="css/component.css" type="text/css" rel="stylesheet" />
Конечно, тот, кто стакивается первый раз с подключением наборов, может подумать, что мне для использования одной-двух кнопок нужно подключать аж 4 файла стилей. Расшифрую, что в каждом лежит:
- normalize.css – этот файл отвечает за сбор стилей на странице;
- font-awesome.min.css – этот необходим для подключения иконок и шрифтов, которые использует библиотека;
- main.css – тут находятся стили для демонстрационной страницы;
- component.css – собственно стили для кнопок и эффектов (он обязателен).
Рассматривать подключение мы будем на примере эффекта нажатия кнопки radomir, для его реализации добавим необходимый HTML код:
<button class="cbutton cbutton--effect-radomir">
<i class="cbutton__icon fa fa-fw fa-save"></i>
<span class="cbutton__text">Save</span>
</button>
И в результате получим:
Как видите: обычный элемент button с прописанным к нему соответствующим эффектом.
Для того чтобы кнопки с эффектами корректно работали не только в современных браузерах, но и в версиях без поддержки HTML5 тегов и CSS3 необходимо подключить скрипт:
<script src="js/modernizr.custom.js"></script>
Так, с нажатием мы разобрались, теперь нам осталось подключить последний скрипт, который при помощи JavaScript кода добавляет класс кнопке после клика.
<script src="js/classie.js"></script>
<script src="js/effectsClick.js"></script>
Вот и всё чем я хотел поделиться на сегодня, хочу только напомнить: CSS3 эффекты не во всех браузерах поддерживаются одинаково, так что будьте внимательны.