I tried to apply CSS transition on margin
and padding
property.
I wanted to make the background visually larger on hover. So I increased the padding and decreased the margin accordingly on hover, so that the text will remain on their current position.
.content {
width: 600px;
margin: auto;
}
a.btn {
background-color: #5C9E42;
color: #fff;
text-decoration: none;
font-size: 35px;
border-radius: 5px;
padding: 10px;
text-shadow: 2px 2px 2px #696969;
transition: all 0.3s ease;
}
a.btn:hover {
background-color: #23570E;
padding: 20px;
margin: -10px;
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#" class="btn">Bello! How are you doing?</a>
</div>
When you run the code you can see, the transition is laggy and the text gives a jerk on hover.
However, it only happens in Chrome, Safari, Opera and other webkit browsers. It's working fine in Firefox and IE though.
P.S: Making a.btn
s display
to inline-block
slightly reduced the lag. What could be the issue?
A workaround would be to apply the transition on a pseudo element with the background color and scale it on hover. This way, the text remains "untransitioned" and won't wiggle :
Demo
CSS :
a.btn {
position:relative;
color: #fff;
text-decoration: none;
font-size: 35px;
padding: 10px;
text-shadow: 2px 2px 2px #696969;
}
a.btn:before{
content:'';
position:absolute;
top:0; left:0;
border-radius: 5px;
width:100%; height:100%;
background-color: #5C9E42;
z-index:-1;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
a.btn:hover:before {
background-color: #23570E;
-webkit-transform: scaleX(1.1) scaleY(1.2);
-ms-transform: scaleX(1.1) scaleY(1.2);
transform: scaleX(1.1) scaleY(1.2);
}
You should include vendor prefixes for transition
and transform
CSS properties, check CanIUse for more info.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With