Как можно сделать плавную смену фона (градиент на градиент) при наведении hover на элемент. Сделал кнопку, дал ей все необходимые стили, включая transition для плавности эффекта наведения, но при этом смена фона происходит резко, а все остальные эффекты в виде изменения тени, как положено меняются плавно.
.btn_default {
display: inline-block;
min-width: 200px;
font-family: $bold;
font-size: 1.125em;
margin-top: 10px;
padding: 13px 20px;
text-align: center;
color: #fff;
outline: none;
border-radius: 30px;
background: linear-gradient(0deg, rgb(158, 48, 160), rgb(213, 80, 298));
box-shadow: 0 2px 7px rgba(213, 80, 208, 0.6);
transition: all 0.5s;
}
.btn_default:hover {
color: #fff;
text-decoration: none;
background: linear-gradient(0deg, rgb(101, 31, 102), rgb(173, 65, 169));
box-shadow: 0 2px 10px rgba(213, 80, 208, 0.9);
}
Some link
Ответ
Как вариант
.btn_default {
display: inline-block;
min-width: 200px;
font-family: $bold;
font-size: 1.125em;
margin-top: 10px;
padding: 13px 20px;
text-align: center;
color: #fff;
outline: none;
border-radius: 30px;
background: linear-gradient(0deg, rgb(158, 48, 160), rgb(213, 80, 298));
box-shadow: 0 2px 7px rgba(213, 80, 208, 0.6);
position: relative;
}
.btn_default > span{
position: relative;
z-index: 1;
}
.btn_default:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
background: linear-gradient(0deg, rgb(101, 31, 102), rgb(173, 65, 169));
box-shadow: 0 2px 10px rgba(213, 80, 208, 0.9);
border-radius: 30px;
opacity: 0;
transition: opacity 0.5s;
}
.btn_default:hover:after {
opacity: 1;
}
Some link
Комментариев нет:
Отправить комментарий