Button pack
КНОПОЧКИ
КЛАССНЫЕ
Набор эффектов, который поможет сделать ваши кнопочки эмоциональными, привлекательными. Их так и захочется жмакнуть
ЕСЛИ
ЭФФЕКТ,
КНОПОЧКЕ
БУДЕТ
WOW
ДОБАВИТЬ
Первые кнопки появились в связи с изобретением электрического карманного фонаря и звонка в конце 19 века
ИСТОРИИ
НЕМНОГО
Сейчас кнопка — это символ чего-то простого, интуитивно понятного
Раньше кнопки олицетворяли роскошь! Фраза «pushbutton» стала прилагательным, стоящим в одном ряду с такими словами, как «современный», «роскошный», «продвинутый», «новый», «простой» и т.д. Всё, что заводилось с кнопки, автоматически приобретало статус «премиум».
Нажми
на кнопку
на кнопку
Кто помнит советский дверные звонки? Срочно нажимайте на кнопку
Нажми
на кнопку
на кнопку
что внутри
Эти же эффекты вы сможете назначить на кнопки в стандартных блоках
Лучших эффектов кнопок, которые вы сможете прикрутить к любой кнопке в зеро блоке
20
20
Ноль усилий с вашей стороны - эффекты полностью готовы к применению. Вставил и пользуйся!
Подробнейшая инструкция, как пользоваться эффектами для зеро-блока и для стандартного блока
0
1+1
какие эффекты
БЛЕСК
БЛИК
СИЯНИЕ
ТРЕПЕТ
ПОДСКОК
ШАШЕЧКИ
ПЕРЕВЕРТЫШ
БЛЕСК ПРИ НАВЕДЕНИИ
БЛИК ПРИ НАВЕДЕНИИ
СИЯНИЕ ПРИ НАВЕДЕНИИ
ТРЕПЕТ ПРИ НАВЕДЕНИИ
ПОДПСКОК ПРИ НАВЕДЕНИИ
ПУЛЬСАЦИЯ ПРИ НАВЕДЕНИИ
ВСПЛЕСК ПРИ НАВЕДЕНИИ
ДВИГАЮТСЯ ПОЛОСКИ
СИЯЮЩИЙ ГРАДИЕНТ №1
СИЯЮЩИЙ ГРАДИЕНТ №2
СИЯЮЩИЙ ГРАДИЕНТ №3
СИЯЮЩИЙ ГРАДИЕНТ №4
ВИБРАЦИЯ
СИЯЮЩИЙ ГРАДИЕНТ №4
ВСЕ ЛЮБЯТ
КРАСИВЫЕ
КНОПОЧКИ
LET'S GO!
LET'S GO!
LET'S GO!
LET'S GO!
LET'S GO!
LET'S GO!
LET'S GO!
LET'S GO!
LET'S GO!
LET'S GO!
ПОСМОТРИ ВИДЕО
КАК СДЕЛАТЬ КРАСИВУЮ
КНОПКУ
ЗАБИРАЙ БЕСПЛАТНО - БЛЕСК ПРИ НАВЕДЕНИИ
Имя стиля grette_8 для зеро блока и uc-grette_8 для стандартного блока. Скопируй и используй в своем проекте
<script>
$(document).ready(function() {
$('.grette_8 .tn-atom, .uc-grette_8 .t-btn').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>
<style>
.grette_8 .tn-atom,
.uc-grette_8 .t-btn {
cursor: pointer;
position: relative;
overflow: hidden;
}
.grette_8 .grette__wrap,
.uc-grette_8 .grette__wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
overflow: hidden;
}
.grette_8 .grette__wrap:hover .grette__inner,
.uc-grette_8 .grette__wrap:hover .grette__inner {
width: 100%;
height: 100%;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-animation-name: grette_8;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
animation-name: grette_8;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 2s;
}
.grette_8 .grette__effect,
.uc-grette_8 .grette__effect {
position: absolute;
top: 0;
left: -85px;
width: 45px;
height: 100%;
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .4)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
background: -o-linear-gradient(left, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
-webkit-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
transform: skewX(-45deg);
}
@-webkit-keyframes grette_8 {
85% {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
100% {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
}
@keyframes grette_8 {
85% {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
100% {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
}
</style>ЗАБИРАЙ БЕСПЛАТНО - БЛИК ПРИ НАВЕДЕНИИ
Имя стиля grette_19 для зеро блока и uc-grette_19 для стандартного блока. Скопируй и используй в своем проекте
<script>
$(document).ready(function() {
$('.grette_19 .tn-atom, .uc-grette_19 .t-btn').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>
<style>
.grette_19 .tn-atom,
.uc-grette_19 .t-btn {
cursor: pointer;
position: relative;
overflow: hidden;
}
.grette_19 .grette__wrap,
.uc-grette_19 .grette__wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
overflow: hidden;
}
.grette_19 .grette__wrap:hover .grette__inner,
.uc-grette_19 .grette__wrap:hover .grette__inner {
width: 100%;
height: 100%;
-webkit-transform: translateX(-85px);
-ms-transform: translateX(-85px);
transform: translateX(-85px);
-webkit-animation-name: grette_19;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
animation-name: grette_19;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 2s;
}
.grette_19 .grette__effect,
.uc-grette_19 .grette__effect {
position: absolute;
top: 0;
left: -60px;
width: 60px;
height: 100%;
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255,255,255, 0.5)), to(rgba(255, 255, 255, 0)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255,255,255, 0.5) 50%, rgba(255, 255, 255, 0));
background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255,255,255, 0.5) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255,255,255, 0.5) 50%, rgba(255, 255, 255, 0));
}
@-webkit-keyframes grette_19 {
30% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
40% {
-webkit-transform: translateX(31%);
transform: translateX(31%);
}
70% {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
100% {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
}
@keyframes grette_19 {
30% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
40% {
-webkit-transform: translateX(31%);
transform: translateX(31%);
}
70% {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
100% {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
}
</style>ЗАБИРАЙ БЕСПЛАТНО - СИЯНИЕ ПРИ НАВЕДЕНИИ
Имя стиля grette_20 для зеро блока и uc-grette_20 для стандартного блока. Скопируй и используй в своем проекте
<script>
$(document).ready(function() {
$('.grette_20 .tn-atom, .uc-grette_20 .t-btn').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>
<style>
.grette_20 .tn-atom,
.uc-grette_20 .t-btn {
cursor: pointer;
position: relative;
overflow: hidden;
}
.grette_20 .grette__wrap,
.uc-grette_20 .grette__wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
overflow: hidden;
}
.grette_20 .grette__inner,
.uc-grette_20 .grette__inner {
width: 100%;
height: 100%;
}
.grette_20 .grette__wrap:hover .grette__effect,
.uc-grette_20 .grette__wrap:hover .grette__effect {
position: absolute;
top: 0;
left: -100%;
height: 350%;
width: 200%;
background: rgba(255, 255, 255, 0.8);
border-radius: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
z-index: 20;
-webkit-animation-name: grette_20;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
animation-name: grette_20;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 2s;
}
@-webkit-keyframes grette_20 {
90% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
@keyframes grette_20 {
90% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
</style>
СКОПИРУЙТЕ КОД
<script>
$(document).ready(function() {
$('.grette_1 .tn-atom').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>
<style>
.grette_1 .tn-atom {
cursor: pointer;
position: relative;
overflow: hidden;
}
.grette_1 .grette__wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.grette_1 .grette__inner {
width: 100%;
height: 100%;
-webkit-transform: translateX(-85px);
-ms-transform: translateX(-85px);
transform: translateX(-85px);
-webkit-animation-name: grette_1;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 4s;
animation-name: grette_1;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 4s;
}
.grette_1 .grette__effect {
position: absolute;
top: 0;
left: 30px;
width: 45px;
height: 100%;
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .4)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
background: -o-linear-gradient(left, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
-webkit-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
transform: skewX(-45deg);
}
@-webkit-keyframes grette_1 {
50% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes grette_1 {
50% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
</style>
$(document).ready(function() {
$('.grette_1 .tn-atom').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>
<style>
.grette_1 .tn-atom {
cursor: pointer;
position: relative;
overflow: hidden;
}
.grette_1 .grette__wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.grette_1 .grette__inner {
width: 100%;
height: 100%;
-webkit-transform: translateX(-85px);
-ms-transform: translateX(-85px);
transform: translateX(-85px);
-webkit-animation-name: grette_1;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 4s;
animation-name: grette_1;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 4s;
}
.grette_1 .grette__effect {
position: absolute;
top: 0;
left: 30px;
width: 45px;
height: 100%;
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .4)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
background: -o-linear-gradient(left, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
-webkit-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
transform: skewX(-45deg);
}
@-webkit-keyframes grette_1 {
50% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes grette_1 {
50% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
</style>
СКОПИРУЙТЕ КОД
<style>
.grette_2 {
cursor: pointer;
-webkit-animation-name: grette_2;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 3s;
animation-name: grette_2;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 3s;
}
@keyframes grette_2 {
2% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
4% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
6% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
8% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
10% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
12% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
14% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
16% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
18% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
20% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
</style>
.grette_2 {
cursor: pointer;
-webkit-animation-name: grette_2;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 3s;
animation-name: grette_2;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 3s;
}
@keyframes grette_2 {
2% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
4% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
6% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
8% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
10% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
12% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
14% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
16% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
18% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
20% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
</style>
Click to order
ВАШ ЗАКАЗ
Total:
✓ Нажимая на кнопку, вы соглашаетесь с нашей Политикой конфиденциальности и Офертой
