< Back to Code

Using transition and transform in CSS to make hover animation

Hover to change the transform state without transition effect

Hello hover me
				
					.btn{
background: var( --e-global-color-primary );
padding: 5px 10px;
width: 140px;
color: white;
}

.btn:hover{

transform: scale(1.1);
transform: translateY(-10px);

}
				
			

Hover to change the transform state with transition effect 2s

Hello hover me
Remember to put transition in the orginal div for smooth transition
				
					.btn{
background: var( --e-global-color-primary );
padding: 5px 10px;
width: 140px;
color: white;
transition: 0.5s;

}

.btn:hover{

transform: scale(1.1);
transform: translateY(-10px);

}
				
			
en_US

© Copyright by JAYbranding – All rights reserved.

Chúng tôi mong muốn tư vấn chi tiết hơn cho quý khách.
Vui lòng nhập thông tin để nhận tự vấn