моих познаний хватило только чтоб сделать (найти и переделать под себя) стиль кнопки, но вот как довести до ума не представляю. Сейчас анимация срабатывает при наведение на кнопку, а нужно чтоб она была зацикленной, точнее повторялась через определений интервал. Такое возможно?
@-webkit-keyframes sheen {
0% {
-webkit-transform: skewY(-15deg) translateX(0);
transform: skewY(-15deg) translateX(0);
}
100% {
-webkit-transform: skewY(-15deg) translateX(12.5em);
transform: skewY(-15deg) translateX(12.5em);
}
}
@keyframes sheen {
0% {
-webkit-transform: skewY(-15deg) translateX(0);
transform: skewY(-15deg) translateX(0);
}
100% {
-webkit-transform: skewY(-15deg) translateX(12.5em);
transform: skewY(-15deg) translateX(12.5em);
}
}
.wrapper {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.button {
padding: 0.75em 2em;
text-align: center;
text-decoration: none;
color: #2194e0;
border: 2px solid #2194e0;
font-size: 24px;
display: inline-block;
border-radius: 0.3em;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.button:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 1em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-15deg) translateX(0);
transform: skewX(-15deg) translateX(0);
transition: none;
}
.button:hover {
background-color: #2194e0;
color: #fff;
border-bottom: 4px solid #1977b5;
}
.button:hover:before {
-webkit-transform: skewX(-15deg) translateX(13.5em);
transform: skewX(-15deg) translateX(13.5em);
transition: all 1s ease-in-out;
}
<div class="wrapper">
<a href="#" class="button">Shiney!</a>
</div>
Нашел решение задачи. Вот такое решение, может кому-то пригодится:
body {background: #ffbfbe;}
a {
text-decoration: none;
outline: none;
display: inline-block;
padding: 10px 30px;
margin: 10px 20px;
position: relative;
overflow: hidden;
border: 2px solid #fe6637;
background: #fe6637;
color: #fff;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
transition: .2s ease-in-out;
}
a:before {
content: "";
background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.5));
height: 50px;
width: 50px;
position: absolute;
top: -8px;
transform: skewX(-45deg);
animation: shine 1s linear infinite;
}
@keyframes shine {
from {left: -75px;}
to {left: 150px;}
}
<a href="">Button</a>