Градиент стиль кнопок Bootstrap 4 / Кнопки / Сниппеты Bootstrap

Градиент стиль кнопок Bootstrap 4

Красивые анимированные кнопки вид которых Вы можете заменить для Bootstrap 4, они переливаются анимацией градиента, что добавляет им привлекательности нажатия.

* Градиенты Colorzilla, Bootstrap 4 не ниже v4.0.0, добавить ниже основных стилей Бутстрап на нужных страницах.

Версия: v1.0.0

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

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

Bootstrap: 4

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

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

Вес файла: 2.1 Kb

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

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

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

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

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

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

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

Рейтинг: 4.6 / 5 - 7 голосов

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

Авторство: Посмотреть

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

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

Теги: кнопки анимированные, bootstrap 4, button gradient, кнопки с анимацией, кнопки с градиентами

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

Добавлено: 2018-12-10 в 19:49

Метка: 1544460557

⇄ ⇅

<div class="container">
<h2 class="text-center">Buttons Style</h2>
 <div class="row elements-page-btn mt-3">
 <div class="col-md-8 col-sm-8 mx-auto text-center mb-5">
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-secondary">Secondary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-light">Light</button>
 <button type="button" class="btn btn-dark">Dark</button>
 <button type="button" class="btn btn-link">Link</button>
 </div>
 <div class="col-md-7 col-sm-7 mx-auto text-center">
 <button type="button" class="btn btn-primary btn-sm">Primary</button>
 <button type="button" class="btn btn-secondary btn-sm">Secondary</button>
 <button type="button" class="btn btn-success btn-sm">Success</button>
 <button type="button" class="btn btn-danger btn-sm">Danger</button>
 <button type="button" class="btn btn-warning btn-sm">Warning</button>
 <button type="button" class="btn btn-info btn-sm">Info</button>
 <button type="button" class="btn btn-light btn-sm">Light</button>
 <button type="button" class="btn btn-dark btn-sm">Dark</button>
 <button type="button" class="btn btn-link btn-sm">Link</button>
 </div>
 </div>
 </div>

<div class="container">
<h2 class="text-center">Outline Buttons Style</h2>
 <div class="row elements-page-btn mt-3">
 <div class="col-md-8 col-sm-8 mx-auto text-center mb-5">
 <button type="button" class="btn btn-outline-primary">Primary</button>
 <button type="button" class="btn btn-outline-secondary">Secondary</button>
 <button type="button" class="btn btn-outline-success">Success</button>
 <button type="button" class="btn btn-outline-danger">Danger</button>
 <button type="button" class="btn btn-outline-warning">Warning</button>
 <button type="button" class="btn btn-outline-info">Info</button>
 <button type="button" class="btn btn-outline-light">Light</button>
 <button type="button" class="btn btn-outline-dark">Dark</button>
 </div>
 <div class="col-md-7 col-sm-7 mx-auto text-center">
 <button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
 <button type="button" class="btn btn-outline-secondary btn-sm">Secondary</button>
 <button type="button" class="btn btn-outline-success btn-sm">Success</button>
 <button type="button" class="btn btn-outline-danger btn-sm">Danger</button>
 <button type="button" class="btn btn-outline-warning btn-sm">Warning</button>
 <button type="button" class="btn btn-outline-info btn-sm">Info</button>
 <button type="button" class="btn btn-outline-light btn-sm">Light</button>
 <button type="button" class="btn btn-outline-dark btn-sm">Dark</button>
 </div>
 </div>
 </div>

BootstrapTema

Градиент стиль кнопок Bootstrap 4

Скриншот

Подробнее

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

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

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