Страницы

Поиск по вопросам

воскресенье, 16 февраля 2020 г.

Как сделать плавную смену 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

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

Отправить комментарий