Как сделать плавную смену css градиента при наведении

#html #css #css3 #вёрстка #hover

Как можно сделать плавную смену фона (градиент на градиент) при наведении 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



    

Ответы

Ответ 1

Как вариант



.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


Ответ 2

.btn_default {
  display: inline-block;
  min-width: 200px;
  font-weight: bold;
  font-size: 1.125em;
  margin: 10px auto;
  padding: 13px 20px;
  text-align: center;
  text-shadow: 0px 0px 1px hsla(0, 0%, 0%, .8);
  color: #fff;
  outline: none;
  border-radius: 30px;
  background: hsla(294, 53%, 47%, 1);
  box-shadow: inset .125em .125em .5em hsla(294, 53%, 40%, 1), inset -.125em -.125em
.5em hsla(294, 53%, 40%, 1), 0 2px 7px rgba(213, 80, 208, 0.6);
  transition: all .8s linear 0s;
}

.btn_default:hover {
  color: #fff;
  text-decoration: none;
  background: hsla(294, 53%, 37%, 1);
  box-shadow: inset .125em .125em .5em hsla(294, 53%, 30%, 1), inset -.125em -.125em
.5em hsla(294, 53%, 30%, 1), 0 2px 10px rgba(213, 80, 208, 0.9);
}
Some link