Кнопки Bootstrap 3 Transform Skew / Кнопки / Сниппеты Bootstrap

Версия: v1.0

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

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

Для Bootstrap: 3

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

Язык: Английский

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

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

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

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

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

Рейтинг: 4.5 / 5 - 4 голосов

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

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

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

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

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

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

Добавлено: 2016-08-07 в 09:51

Метка: 1581113708

⇄ ⇅

.btn{
 border-radius: 0;
 text-transform: uppercase;
 position: relative;
 overflow: hidden;
 z-index: 1;
 transition: all 0.4s ease 0s;
}
.btn:before{
 content: "";
 width: 210%;
 height: 210%;
 position: absolute;
 top: -120px;
 left: 30px;
 transform: skew(67deg);
 z-index: -1;
 transition: all 0.4s ease 0s;
}
.btn:hover:before{
 top: -20px;
 left: -52px;
}
.btn.red{
 border: 1px solid #ff3939;
 color: #ff3939;
}
.btn.red:hover:before{
 background: #ff3939;
}
.btn.blue{
 border: 1px solid #3fb7c8;
 color: #3fb7c8;
}
.btn.blue:hover:before{
 background: #3fb7c8;
}
.btn.orange{
 border: 1px solid #f88030;
 color: #f88030;
}
.btn.orange:hover:before{
 background: #f88030;
}
.btn.green{
 border: 1px solid #35c568;
 color: #35c568;
}
.btn.green:hover:before{
 background: #35c568;
}
.btn.red:hover,
.btn.blue:hover,
.btn.orange:hover,
.btn.green:hover{
 color: #fff;
}
@media screen and (max-width: 767px){
 .btn{ margin-bottom: 15px; }
}
.pad-15{
 padding: 15px 0;
}
</style>

<div class="col-sm-3">
 <a href="#" class="btn btn-lg red">button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-lg blue">button</a>
 </div>

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

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

</div>

<div class="col-sm-3">
 <a href="#" class="btn btn-sm red">button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-sm blue">button</a>
 </div>

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

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

</div>

<div class="col-sm-3">
 <a href="#" class="btn btn-xs red">button</a>
 </div>

<div class="col-sm-3">
 <a href="#" class="btn btn-xs blue">button</a>
 </div>

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

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

</div>

</div>

BootstrapTema

Кнопки Bootstrap 3 Transform Skew

Скриншот

Подробнее

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

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

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