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

Иконки, которые мы добавили с помощью псевдо классов :before и :after, созданы с помощью приложения 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.