я задал для кнопки свойство overflow: hidden, чтобы блик на кнопке не выходил за границы, но блик почему-то частично остаётся, на мобилках особ айфон
.btn {
position: relative;
display: flex;
overflow: hidden;
background-color: black;
border: 0.2rem solid #F8E31A;
border-radius: 3rem;
color: #F8E31A;
width: 23rem;
height: 6rem;
text-decoration: none;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: sans-serif;
letter-spacing: .3rem;
animation-name: departure;
animation-duration: 2s;
animation-delay: 6s;
animation-timing-function: ease linear;
backface-visibility: hidden;
animation-fill-mode: backwards;
animation-iteration-count: 1;
transition: all;
}
.btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
transform: translateX(-5rem) skewX(-45deg);
}
.right-wraper__btn:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
background-color: rgba(255, 255, 255, 0.6);
transform: translateX(-7rem) skewX(-45deg);
animation-name: ligh;
animation-duration: 10s;
animation-delay: 1s;
animation-timing-function: ease linear;
backface-visibility: hidden;
animation-fill-mode: backwards;
animation-iteration-count: infinite;
transition: all;
}
.btn:hover:before {
animation-name: ligh-touch;
animation-duration: 0.5s;
animation-timing-function: ease linear;
backface-visibility: hidden;
animation-iteration-count: 1;
animation-fill-mode: backwards;
transition: all;
}
@keyframes ligh {
0% {
transform: translateX(-7rem) skewX(-45deg);
}
20% {
transform: translateX(30rem) skewX(-45deg);
}
100% {
transform: translateX(30rem) skewX(-45deg);
}
}
@keyframes ligh-touch {
from {
transform: translateX(-7rem) skewX(-45deg);
}
to {
transform: translateX(30rem) skewX(-45deg);
}
}
<button class="right-wraper__btn btn"></button>
Источник: Stack Overflow на русском