Креативные стили для кнопок
- Details
- Published on Tuesday, 18 June 2013 08:06
Сегодня мы хотим познакомить вас с набором стилей для кнопок: они выгладят очень просто, креативно и с небольшими эффектами. Анимация реализована с помощью 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.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Jqny1lyDkYg/lessons.php