ФОРУМ PS-Studio.Info

  • Страница 1 из 1
  • 1
Форум » Общий форум: Веб-дизайн » Веб-ресурсы » Шрифты, кнопки и иконки » Кнопки с градиентом и эффектом при наведении на них (Готовые кнопки от сервиса COLORION)
Кнопки с градиентом и эффектом при наведении на них
Дата: Вт, 22.05.2018, 00:00 Сообщение # 1
ps-studio
Администраторы


Сайт COLORION предоставляет огромное количество различных вариантов кнопок с разными цветовыми градиентами и отличным эффектом смены градиента при наведении на кнопку курсора мыши.
Выбирайте понравившуюся кнопку, жмите "Get CSS code", чтобы получить CSS-стили для этой кнопки,копируйте их и используйте в своих проектах.

Как использовать?

Допустим, имеем код кнопки, к нему нужно добавить класс .btn-grad

Код
<button class="btn-grad">Кнопочка</button>


В таблицу стилей нужно добавить стили для этого класса, к примеру, с такими настройками кнопки:

Код

.btn-grad {
margin: 10px;
padding: 5px 10px;
text-align: center;
font-size:14px;
transition: 0.5s;
background-size: 200% auto;
color: white;
border:none;
border-radius: 5px;
display: block;
}


После этого, на странице сервиса выбираете нужную цветовую схему кнопки, получаете дополнительно стили для класса .btn-grad и вставляете их также в свой файл стилей.
Что-то наподобие этого:

Код

.btn-grad {background-image: linear-gradient(to right, #485563 0%, #29323c 51%, #485563 100%)}
.btn-grad:hover { background-position: right center; }


Прикрепления: 0393842.png(124.5 Kb)
профиль www Вверх
Форум » Общий форум: Веб-дизайн » Веб-ресурсы » Шрифты, кнопки и иконки » Кнопки с градиентом и эффектом при наведении на них (Готовые кнопки от сервиса COLORION)
  • Страница 1 из 1
  • 1
Поиск:

Хостинг от uCoz