Показать Меню
falbar 22 эффекта кнопок

22 эффекта для кнопок

22 эффекта кнопок

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

Вот ещё несколько статей по теме:

Как и в других наборах, принцип добавления прост – можно просто скопировать необходимые строки кода, но мы сегодня рассмотрим добавление кнопки на одном из примеров. И для начала нам нужно подключить 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>

И в результате получим:

Эффект Radomir

Как видите: обычный элемент button с прописанным к нему соответствующим эффектом.

Для того чтобы кнопки корректно работали не только в современных браузерах, но и в версиях без поддержки HTML5 тегов и CSS3 необходимо подключить скрипт:

<script src="js/modernizr.custom.js"></script>

Так, с нажатием мы разобрались, теперь нам осталось подключить последний скрипт, который при помощи JavaScript кода добавляет класс кнопке после клика.

<script src="js/classie.js"></script>
<script src="js/effectsClick.js"></script>

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

Источник
tympanus.net

Подписаться на обновления

Комментариев еще не оставлено