Увеличить время для hover`a

03 июня 2021, 15:40

Есть код, как увеличить время возврата в первоначальное положение, т.е. оно доходит до половины и спустя допустим 30 секунд или 1 час возвращается обратно

button { 
    height: 42px; 
	border: none; 
	background: #3a7999; 
	color: #f2f2f2; 
	padding: 10px; 
	font-size: 18px; 
	border-radius: 5px; 
	position: relative; 
	box-sizing: border-box; 
	transition: all 500ms ease;  
} 
 
button:before { 
	content:''; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 0; 
	height: 42px; 
	background: rgba(255,255,255,0.3); 
	border-radius: 5px; 
	transition: all 2s ease; 
} 
 
button:hover:before { 
	width: 50px; 
}

<button>Сюда иди</button>

Answer 1

Вот так вот:

button { 
    height: 42px; 
	border: none; 
	background: #3a7999; 
	color: #f2f2f2; 
	padding: 10px; 
	font-size: 18px; 
	border-radius: 5px; 
	position: relative; 
	box-sizing: border-box; 
	transition: all 500ms ease;  
} 
 
button:before { 
	content:''; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 0; 
	height: 42px; 
	background: rgba(255,255,255,0.3); 
	border-radius: 5px; 
	transition: all 30s ease; 
} 
 
button:hover:before { 
	width: 50px; 
    transition: all 2s ease; 
}