Buttons "jump" after hover animation
So the title itself is pretty explanatory. I'm trying to give my buttons a hover effect that makes them bigger when hovering but somehow when you stop hovering and it goes back to its normal size, it does a little jump.
I've made a codepen with the code of the buttons so you can easily check it, but I'm leaving a video too.
PS: It happens with logos too.
https://codepen.io/Tekyo/pen/vYvdrNg
16 Replies
it's not a jump, it's just changing how it's being rendered
And how can I fix that?
will-change: transform; <-- add this to .btn
it's not a perfect fix, but it kinda worksI don't see a jump in that screen capture and I also don't see it on Codepen. Are you showing us the goal or are you showing us the problem?
I'll try that
I'm showing the problem. Let me take a video of the real button, maybe it's harder to notice the "jump" on the example I sent.
That actually worked!
Thank you so much <3
you're welcome
by the way, the text will look like shit, with some fonts, so, be careful
Could I know what's the
will-change for?will-change - CSS: Cascading Style Sheets | MDN
The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.
in this case, the browser is probably taking some corners when rendering the transition
how the browser does it? no idea
Alright, got it!
Thanks man
Appreciate the help ❤️
you're welcome
just avoid sprinking it all over
Yeah, I see that is not recommended to use it a lot
yup
personally, i wouldn't do any of this scaling stuff, and would just use borders and colors
I'll take that into consideration 🙌