«
»
CSSWEBWordPress - CSSПолезные сайты

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

Источник записи: https://mediadoma.com

Связанные записи
ElementorWordPressПлагиныПолезные сайты

Elementor - 10 потрясающих мест для поиска бесплатных или премиальных шаблонов

Chrome DevToolsGoogleGoogle ChromeWEB

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools

WEBПолезные сайты

50 бесплатных сайтов для ваших проектов графического дизайна в 2020 году | Бесплатные Графика, Фото и Видео стоки, Шрифты, Макеты и не только

Полезные сайты

Отличный ресурс для перевода чисел в текст для Украинского Русского и Английского языков