Красивые кнопки на CSS. Эффекты при наведении

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

Например кнопки которые вы видите в этой статье оформлены одним из примером приведенных в демо страницы.

 

 

Давайте разберемся как их подключать:

 

В архиве находятся 2 ключевые, необходимые для работы папки, css и fonts, содержимое которых соответственно стили и шрифты. В папке css мы видим 4 файла: 

  • buttons.css (файл содержащий стили кнопок); 
  • vicons-font.css (содержит классы , для отображения иконок путем подключения дополнительных шрифтов через @font-face и псевдо атрибутов  css :before или :after);
  • base.css (базовые css стили для адекватного отображения);
  • normalize.css с надстройками display для различных элементов.

Итак подключаем наши css:

 

<link rel="stylesheet" href="/css/buttons.css" type="text/css">

<link rel="stylesheet" href="/css/vicons-font.css" type="text/css">

<link rel="stylesheet" href="/css/base.css" type="text/css">

<link rel="stylesheet" href="/css/normalize.css" type="text/css">

 

Осталось добавить шрифты из папки в нужную директорию и создать кнопку с нужными нам стилями:

 

<button class="button button--sacnite button--round-l"><i class="button__icon icon icon-bookmark"></i><span>Bookmark</span></button>

 

Результат: