Buttons Bootstrap 3 Blur Effect / Кнопки / Сниппеты Bootstrap

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Кнопки

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 985

Количество символов:

Посмотрели: 4937 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: http://goo.gl/16n7Lu

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, Effect, сниппет, Bootstrap, Responsive, html, Blur, Button, адаптивные, кнопки

Поделился: BootstrapТема

Добавлено: 2016-05-13 в 16:57

Метка: 1581148829

⇄ ⇅

.btn.orange{
 background: linear-gradient(to left, #fe8c00 , #f83600);
}
.btn.orange:before{
 background: linear-gradient(to right,#fe8c00,#f83600);
}
.btn.purple{
 background: linear-gradient(to left, #c04848 , #480048);
}
.btn.purple:before{
 background: linear-gradient(to right,#c04848,#480048);
}
@media only screen and (max-width: 767px){
 .btn{
 margin-bottom:15px;
 }
}
/* отступ */
.pad-15{
 padding: 15px 0;
}
</style>

<div class="row pad-15">
 <div class="col-sm-3">
 <a href="#" class="btn btn-lg blue"><i class="fa fa-download"></i>button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-lg green"><i class="fa fa-download"></i>button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-lg orange"><i class="fa fa-download"></i>button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-lg purple"><i class="fa fa-download"></i>button</a>
 </div>
 </div>

<div class="row pad-15">
 <div class="col-sm-3">
 <a href="#" class="btn btn-sm blue"><i class="fa fa-download"></i>button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-sm green"><i class="fa fa-download"></i>button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-sm orange"><i class="fa fa-download"></i>button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-sm purple"><i class="fa fa-download"></i>button</a>
 </div>
 </div>

<div class="row pad-15">
 <div class="col-sm-3">
 <a href="#" class="btn btn-xs blue"><i class="fa fa-download"></i>button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-xs green"><i class="fa fa-download"></i>button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-xs orange"><i class="fa fa-download"></i>button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-xs purple"><i class="fa fa-download"></i>button</a>
 </div>
 </div>

</div>

BootstrapTema

Buttons Bootstrap 3 Blur Effect

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0