Bootstrap 4 Button Gradient
Набор красивых кнопок с градиентами фона для Bootstrap 4, градиенты при наведении меняют позиционирование в вертикальном и горизонтальном направлениях. Можете использовать на разных сайтах
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
button { margin-bottom: 8px }
</style>
<style>
.btn-grd-danger,
.btn-grd-disabled,
.btn-grd-info,
.btn-grd-inverse,
.btn-grd-primary,
.btn-grd-success,
.btn-grd-warning,
.btn-grd-warning {
background-size: 200% auto;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
color: #fff;
}
.btn-grd-danger:hover,
.btn-grd-disabled:hover,
.btn-grd-info:hover,
.btn-grd-inverse:hover,
.btn-grd-primary:hover,
.btn-grd-success:hover,
.btn-grd-warning:hover,
.btn-grd-warning:hover {
background-position: right center;
}
.btn-grd-danger.hor-grd,
.btn-grd-disabled.hor-grd,
.btn-grd-info.hor-grd,
.btn-grd-inverse.hor-grd,
.btn-grd-primary.hor-grd,
.btn-grd-success.hor-grd,
.btn-grd-warning.hor-grd,
.btn-grd-warning.hor-grd {
background-size: auto 200%;
}
.btn-grd-danger.hor-grd:hover,
.btn-grd-disabled.hor-grd:hover,
.btn-grd-info.hor-grd:hover,
.btn-grd-inverse.hor-grd:hover,
.btn-grd-primary.hor-grd:hover,
.btn-grd-success.hor-grd:hover,
.btn-grd-warning.hor-grd:hover,
.btn-grd-warning.hor-grd:hover {
background-position: bottom center;
}
.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>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
admin
Автор18-10-2020, 22:42
ДатаИконки , Кнопки / Bootstrap сниппеты
Категория- Комментариев: 0
- Просмотров: 604
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap css CSS CSS3 dle DLE fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Как задать ширину в 100 пикселей в HTML