Иногда хочется привлечь внимание пользователя к кнопке. Чтобы он ее увидел и захотел нажать, будть то "Добавить в корзину", "Купить", "Заказать" и т.д. Здесь мы будем собирать наиболее интересные решения, которые мы разработали сами или где-то подсмотрели и кастомизировали под себя.
Мерцающая кнопка
- Пример
- HTML
- CSS
<a href="#" class="knopka1">Добавить в корзину</a>.knopka1 {
display: inline-block;
padding: 14px 30px;
font-size: 18px;
line-height: 1;
border-radius: 50px;
text-decoration: none;
border: 1px solid #a7e7fd;
background-color: #53737e;
color: #fff;
overflow: hidden;
position: relative;
vertical-align: middle;
transition: all .2s ease-out;
user-select: none;
}
.knopka1:hover {
background-color: #53737ecf;
}
.knopka1:after {
content: "";
position: absolute;
top: -50%;
bottom: -50%;
background: linear-gradient(90deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.6) 100%);
width: 45px;
-webkit-transform: skewX(-22deg);
transform: skewX(-22deg);
left: -65%;
-webkit-animation-name: blick;
animation-name: blick;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes blick {
60% {
left: 100%
}
to {
left: 130%
}
}
@keyframes blick {
60% {
left: 100%
}
to {
left: 130%
}
}