null

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

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

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

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

<button class="btn btn-6 btn-6d">Button</button>

Обычными стилями для всех кнопок являются некоторые сбрасываемые значения, определенные в .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