Як додати CSS відблиск кнопці?

Сьогодні я продемонструю вам чудовий спосіб спонукати користувача вашого сайту виконати дію, а саме покажу як додати кнопці CSS блік без використання JavaScript.
Ось що в нас вийде в результаті:
А ось і сам код CSS, який вам знадобиться:
.blick-button {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.blick-button:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
opacity: 1;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
-webkit-animation: moving 3s ease-in-out infinite;
-moz-animation: moving 3s ease-in-out infinite;
-ms-animation: moving 3s ease-in-out infinite;
-o-animation: moving 3s ease-in-out infinite;
animation: moving 3s ease-in-out infinite;
}
@keyframes moving {
30% {
webkit-transform: skewX(-45deg) translateX(33.5em);
transform: skewX(-45deg) translateX(33.5em);
}
100% {
webkit-transform: skewX(-45deg) translateX(33.5em);
transform: skewX(-45deg) translateX(33.5em);
}
}
Також, якщо у вас щось не вийшло, ви можете переглянути відео про те, як додати CSS блік кнопці: