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);
}