Градиент

19 Ноября 2018
Ребят, подскажите код css градиента чтобы отливал плавным цветом вправо, а при наведении курсора отлив перемещался влево (для линков селектор нужен) сам я в таких вещах нешарю, а в шаблонах такого нет. Шаблон юзаю сенди (это корпаративный веб шаблон для феном) в общем нужно чтобы позиция отлива смещалась в другую сторону при наведении курсора.

Комментарии:

Скиталец

19 Ноября 2018
Автор темы
Вопрос решон, подходящий вариант предоставил алкатрас на форуме woweb. ru берите может кому тоже пригодится
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;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
color: #fe6637;
transition: .2s ease-in-out;
}
a:before {
content: "";
background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.5));
height: 50px;
width: 50px;
position: absolute;
top: -8px;
left: -75px;
transform: skewX(-45deg);
}
a:hover {
background: #fe6637;
color: #fff;
}
a:hover:before {
left: 150px;
transition: .5s ease-in-out;
}