Как сделать блик на кнопке?

Question

[ferles]

Всем привет, как сделать такую анимацию на кнопке? vel24.ru

Answer 1

[Александр]

По ссылке что вы дали в панели разработчика можно посмотреть. Псевдоэлемент after двигается с помощью анимации:

@keyframes slideme
	0%
		left: -30px
		margin-left: 0px
	30%
		left: 110%
		margin-left: 80px
	100%
		left: 110%
		margin-left: 80px

Answer 2

[Dymok]

https://codepen.io/UnluckySerivelha/pen/xzGpRd
Всё есть на сайте

Answer 3

[profesor08]

Псевдоэлемент :before или :after двигай слева на право.

@keyframes slideme {
  0% {
    left: -30px;
    margin-left: 0px;
  }
  30% {
    left: 110%;
    margin-left: 80px;
  }
  100% {
    left: 110%;
    margin-left: 80px;
  }
}

.custom-btn:after {
    content: "";
    display: block;
    width: 30px;
    height: 300px;
    margin-left: 60px;
    background: #fff;
    position: absolute;
    left: -40px;
    top: -150px;
    z-index: 1;
    transform: rotate(45deg);
    transition: all 0.1s;
    animation-name: slideme;
    animation-duration: 3s;
    animation-delay: 0.05s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

Answer 4

[Alex D]

Код объемный, не буду его приводить. Вот здесь есть код и демонстрация для трех разных анимированных кнопок с блеском. Так же есть эффект с наведением мыши и без наведения, на чистом CSS profi.spage.me.