Кнопка с эффектом CSS / Кнопки / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Laravel, Angular, WHMCS, PHP

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

Вес файла: 0.9 Kb

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

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

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

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

Прикреплён файл №1: /_sf/55/5545.html

Прикреплён файл №2: /stuff/0-0-0-5545-20

Скачали бесплатно: 8 раз

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

Рейтинг: 2.7 / 5 - 6 голосов

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

Авторство: bootstraptema.ru

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

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

Теги: hover effect, кнопки, Button, сниппет, Bootstrap, кнопка с эффектом, Snippet

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

Добавлено: 2022-10-25 в 12:07

Метка: 1666688847

⇄ ⇅

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />

<style>
.btn{
 color: #fff;
 font-size: 22px;
 font-weight: 700;
 letter-spacing: 1px;
 text-transform: uppercase;
 border-radius: 0;
 border: 2px solid #03a9f4;
 perspective: 500px;
 overflow: hidden;
 position: relative;
 z-index: 1;
 transition: all 0.3s ease 0s;
}
.btn:hover{
 color: #fff;
 border-color: #01579b;
}
.btn:before,
.btn:after{
 content: '';
 background-color: #03a9f4;
 height: 110%;
 width: 100%;
 border-radius: 0 0 50% 50%;
 position: absolute;
 left: 0;
 top: -10%;
 z-index: -1;
 transition: all 0.3s;
}
.btn:after{
 background-color: #01579b;
 border-radius: 50% 50% 0 0;
 opacity: 0;
 transform: rotateX(90deg);
 transform-origin: bottom center;
 left: auto;
 right: 0;
 top: auto;
 bottom: -10%;
 z-index: -2;
}
.btn:hover:before{
 opacity: 0;
 transform: rotateX(-90deg);
 transform-origin: top left;
}
.btn:hover:after{
 opacity: 1;
 transform: rotateX(0);
}
.btn.red{ border-color: #f44336; }
.btn.red:hover{ border-color: #b71c1c; }
.btn.red:before{ background-color: #f44336; }
.btn.red:after{ background-color: #b71c1c; }
.btn.purple{ border-color: #673ab7; }
.btn.purple:hover{ border-color: #311b92; }
.btn.purple:before{ background-color: #673ab7; }
.btn.purple:after{ background-color: #311b92; }
.btn.green{ border-color: #4caf50; }
.btn.green:hover{ border-color: #1b5e20; }
.btn.green:before{ background-color: #4caf50; }
.btn.green:after{ background-color: #1b5e20; }
@media only screen and (max-width: 767px){
 .btn{ margin-bottom: 20px; }
}
</style>

<div class="container">
 <div class="row text-center mt-3">

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

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

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

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

</div>
</div>