Сегодня мы поговорим о вдохновении которое таится в кнопках ). Разговор будет о наборе кнопок который состоит из нескольких простых, творческих и тонких стилей и эффектов, которые по настоящему вдохновляют. Эффекты можно увидеть при наведении курсора на некоторые кнопки, и нажатии на другие. В основном используются CSS-переходы, а также анимация CSS, а для некоторых кнопок используется немного JavaScript для добавления / удаления классов эффектов.
Значки, которые мы добавляем с использованием псевдокласса: before (и иногда: after), принадлежат IcoMoon, то есть были созданы с помощью приложения IcoMoon.
Разметка кнопок очень проста. Мы просто добавляем определенные общие классы, например:
Обычными стилями для всех кнопок являются некоторые сбрасываемые значения, определенные в .btn, и мы используем конкретные пронумерованные классы для разных наборов стилей. Этот нумерованный класс — это общие стили для наборов. Затем каждая кнопка имеет дополнительный конкретный класс. При использовании значка мы добавляем значок-класс, который будет использовать псевдоэлемент: прежде, чем добавить символ из шрифта значка.
Пример для конкретного стиля кнопки:
/* Button 6d */
.btn-6d {
border: 2px dashed #226fbe;
}
.btn-6d:hover {
background: transparent;
color: #226fbe;
}
Конечно, это зависит от того, что мы определяем как общий стиль в .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
/////////////https://tympanus.net/Development/CreativeButtons/
/////////////https://tympanus.net/codrops/2013/06/13/creative-button-styles/
// START Add CreativeButtons_1
function CreativeButtons_1() {
wp_enqueue_style( 'CreativeButtons_1', get_template_directory_uri() . '/JS_CSS_Plugins/CreativeButtons/css/component.css' );
}
add_action( 'wp_enqueue_scripts', 'CreativeButtons_1' );
// END Add CreativeButtons_1
// START Add CreativeButtons_2
function CreativeButtons_2() {
wp_enqueue_style( 'CreativeButtons_2', get_template_directory_uri() . '/JS_CSS_Plugins/CreativeButtons/css/default.css' );
}
add_action( 'wp_enqueue_scripts', 'CreativeButtons_2' );
// END Add CreativeButtons_2
Источник записи: https://mediadoma.com