Using transition and transform in CSS to make hover animation
Hover to change the transform state without transition effect
Hello hover me
<style>
.btn{
background: var( --e-global-color-primary );
padding: 5px 10px;
width: 140px;
color: white;
}
.btn:hover{
transform: scale(1.1);
transform: translateY(-10px);
}
</style>
<pre data-line="">
<code readonly="true">
<xmp>.btn{
background: var( --e-global-color-primary );
padding: 5px 10px;
width: 140px;
color: white;
}
.btn:hover{
transform: scale(1.1);
transform: translateY(-10px);
}</xmp>
</code>
</pre>
### Hover to change the transform state with transition effect 2s
Hello hover me
Remember to put transition in the orginal div for smooth transition
<style>
.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);
}
</style>
<pre data-line="">
<code readonly="true">
<xmp>.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);
}</xmp>
</code>
</pre>