null

CreativeButtons – Стильные кнопки на все случаи жизни

Сегодня мы поговорим о вдохновении которое таится в кнопках ). Разговор будет о наборе кнопок который состоит из нескольких простых, творческих и тонких стилей и эффектов, которые по настоящему вдохновляют. Эффекты можно увидеть при наведении курсора на некоторые кнопки, и нажатии на другие. В основном используются CSS-переходы, а также анимация CSS, а для некоторых кнопок используется немного JavaScript для добавления / удаления классов эффектов.

Значки, которые мы добавляем с использованием псевдокласса: before (и иногда: after), принадлежат IcoMoon, то есть были созданы с помощью приложения IcoMoon.

Разметка кнопок очень проста. Мы просто добавляем определенные общие классы, например:

Обычными стилями для всех кнопок являются некоторые сбрасываемые значения, определенные в .btn, и мы используем конкретные пронумерованные классы для разных наборов стилей. Этот нумерованный класс – это общие стили для наборов. Затем каждая кнопка имеет дополнительный конкретный класс. При использовании значка мы добавляем значок-класс, который будет использовать псевдоэлемент: прежде, чем добавить символ из шрифта значка.

Пример для конкретного стиля кнопки:

 

Конечно, это зависит от того, что мы определяем как общий стиль в .btn и .btn-6.

Эта структура классов используется для демонстрационных целей. Использование одного стиля, свойства, конечно, должны быть объединены в один класс.

Надеюсь, вам понравятся стили и Вы найдете их вдохновляющими!

Посмотреть демо версию:

http://tympanus.net/Development/CreativeButtons/

Загрузить набор кнопок:

http://tympanus.net/Development/CreativeButtons/CreativeButtons.zip

Источник оригинал:

https://tympanus.net/codrops/2013/06/13/creative-button-styles/

Подключаем кнопки в WordPress:

Добалвяем в function.php

 

CreativeButtons – Стильные кнопки на все случаи жизни
5 (100%)
Всего проголосовало: 1