Здравствуйте! Некорректно работает анимация shine. Нужно, чтобы эффект был по всей ширине кнопки.
<div class="al-explore-button-wrapper">
<a>
<button class="al-explore-button">Text</button>
</a>
</div>
.al-explore-button {
height: 64px;
padding: 0 60px;
font-size: 16px;
font-weight: 700;
color: @al-main-color-2;
background: @al-main-color-9;
border: 2px solid @al-main-color-2;
text-transform: uppercase;
position: relative;
overflow: hidden;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 100%;
transform: translateX(-100%) ;
animation: shine infinite;
animation-duration: 4s;
background: linear-gradient(90deg, rgba(255, 255, 255, 0),
rgba(255,255,255, 0.5) 50%, rgba(255, 255, 255, 0));
}
@keyframes shine {
30% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
&:hover {
color: @al-hover-color;
border-color: @al-hover-color;
}
}
.al-explore-button-wrapper {
padding-top: 45px;
padding-bottom: 30px;
background-color: @al-main-color-9;
text-align: center;
}