Bootstrap 4 Button Gradient / Кнопки / Сниппеты Bootstrap

Версия: v1.0.0

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

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

Bootstrap: 4

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

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

Вес файла: 1.3 Kb

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

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

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

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

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

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

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

Рейтинг: 3.7 / 5 - 13 голосов

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

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

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

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

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

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

Добавлено: 2019-05-26 в 10:43

Метка: 1558856686

⇄ ⇅

.btn-grd-primary {
 background-image: -webkit-gradient(linear, left top, right top, from(#77aaff), color-stop(51%, #0764ff), to(#77aaff));
 background-image: linear-gradient(to right, #77aaff 0%, #0764ff 51%, #77aaff 100%);
}
.btn-grd-primary.hor-grd {
 background-image: -webkit-gradient(linear, left bottom, left top, from(#77aaff), color-stop(51%, #0764ff), to(#77aaff));
 background-image: linear-gradient(to top, #77aaff 0%, #0764ff 51%, #77aaff 100%);
}

.btn-grd-warning {
 background-image: -webkit-gradient(linear, left top, right top, from(#ffe733), color-stop(51%, #c2ab00), to(#ffe733));
 background-image: linear-gradient(to right, #ffe733 0%, #c2ab00 51%, #ffe733 100%);
}
.btn-grd-warning.hor-grd {
 background-image: -webkit-gradient(linear, left bottom, left top, from(#ffe733), color-stop(51%, #c2ab00), to(#ffe733));
 background-image: linear-gradient(to top, #ffe733 0%, #c2ab00 51%, #ffe733 100%);
}

.btn-grd-danger {
 background-image: -webkit-gradient(linear, left top, right top, from(#ff8585), color-stop(51%, #ff1515), to(#ff8585));
 background-image: linear-gradient(to right, #ff8585 0%, #ff1515 51%, #ff8585 100%);
}
.btn-grd-danger.hor-grd {
 background-image: -webkit-gradient(linear, left bottom, left top, from(#ff8585), color-stop(51%, #ff1515), to(#ff8585));
 background-image: linear-gradient(to top, #ff8585 0%, #ff1515 51%, #ff8585 100%);
}

.btn-grd-success {
 background-image: -webkit-gradient(linear, left top, right top, from(#1aeb72), color-stop(51%, #0c8940), to(#1aeb72));
 background-image: linear-gradient(to right, #1aeb72 0%, #0c8940 51%, #1aeb72 100%);
}
.btn-grd-success.hor-grd {
 background-image: -webkit-gradient(linear, left bottom, left top, from(#1aeb72), color-stop(51%, #0c8940), to(#1aeb72));
 background-image: linear-gradient(to top, #1aeb72 0%, #0c8940 51%, #1aeb72 100%);
}

.btn-grd-inverse {
 background-image: -webkit-gradient(linear, left top, right top, from(#4c626d), color-stop(51%, #1e272b), to(#4c626d));
 background-image: linear-gradient(to right, #4c626d 0%, #1e272b 51%, #4c626d 100%);
}
.btn-grd-inverse.hor-grd {
 background-image: -webkit-gradient(linear, left bottom, left top, from(#4c626d), color-stop(51%, #1e272b), to(#4c626d));
 background-image: linear-gradient(to top, #4c626d 0%, #1e272b 51%, #4c626d 100%);
}

.btn-grd-info {
 background-image: -webkit-gradient(linear, left top, right top, from(#08e3ff), color-stop(51%, #008697), to(#08e3ff));
 background-image: linear-gradient(to right, #08e3ff 0%, #008697 51%, #08e3ff 100%);
}
.btn-grd-info.hor-grd {
 background-image: -webkit-gradient(linear, left bottom, left top, from(#08e3ff), color-stop(51%, #008697), to(#08e3ff));
 background-image: linear-gradient(to top, #08e3ff 0%, #008697 51%, #08e3ff 100%);
}

.btn-grd-disabled {
 background-image: -webkit-gradient(linear, left top, right top, from(#77aaff), color-stop(51%, #0764ff), to(#77aaff));
 background-image: linear-gradient(to right, #77aaff 0%, #0764ff 51%, #77aaff 100%);
}
.btn-grd-disabled.hor-grd {
 background-image: -webkit-gradient(linear, left bottom, left top, from(#77aaff), color-stop(51%, #0764ff), to(#77aaff));
 background-image: linear-gradient(to top, #77aaff 0%, #0764ff 51%, #77aaff 100%);
}
</style>

<div class="container text-center">
<h2>Vertical gradient</h2>
<button class="btn waves-effect waves-light btn-grd-primary ">Primary Button</button>
<button class="btn waves-effect waves-light btn-grd-success">Success Button</button>
<button class="btn waves-effect waves-light btn-grd-info ">Info Button</button>
<button class="btn waves-effect waves-light btn-grd-warning ">Warning Button</button>
<button class="btn waves-effect waves-light btn-grd-danger ">Danger Button</button>
<button class="btn waves-effect waves-light btn-grd-inverse ">Inverse Button</button>
<button class="btn waves-effect waves-light btn-grd-disabled btn-disabled disabled">Disabled Button</button>
<h2>Horizontal gradient</h2>
<button class="btn waves-effect waves-light hor-grd btn-grd-primary ">Primary Button</button>
<button class="btn waves-effect waves-light hor-grd btn-grd-success">Success Button</button>
<button class="btn waves-effect waves-light hor-grd btn-grd-info ">Info Button</button>
<button class="btn waves-effect waves-light hor-grd btn-grd-warning ">Warning Button</button>
<button class="btn waves-effect waves-light hor-grd btn-grd-danger ">Danger Button</button>
<button class="btn waves-effect waves-light hor-grd btn-grd-inverse ">Inverse Button</button>
<button class="btn waves-effect waves-light hor-grd btn-grd-disabled btn-disabled disabled">Disabled Button</button>
</div>

BootstrapTema

Bootstrap 4 Button Gradient

Скриншот

Подробнее

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

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

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