Информационный портал

Информационно-новостной портал

Новости рекламы и маркетинга. Новости Интернета.
Море полезной информации на сайте RetailDepartment.ru
Поделиться ссылкой с друзьями

Креативные стили для кнопок

Twitter
Нравится
RedLine

Сегодня мы хотим познакомить вас с набором стилей для кнопок: они выгладят очень просто, креативно и с небольшими эффектами. Анимация реализована с помощью 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

Add comment

Правила добавления комментариев


Security code
Refresh

Download SocComments v1.3