Иногда хочется привлечь внимание пользователя к кнопке. Чтобы он ее увидел и захотел нажать, будть то "Добавить в корзину", "Купить", "Заказать" и т.д. Здесь мы будем собирать наиболее интересные решения, которые мы разработали сами или где-то подсмотрели и кастомизировали под себя.

Мерцающая кнопка

  • Пример
  • 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%
	}
}
Обсудить проект
Хотите обсудить проект? Есть вопросы по алгоритму работы?

Смело оставляйте заявку на нашем сайте и мы свяжемся с вами в самое ближайшее время.