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
ἔρως
ἔρως14mo ago
it's not a jump, it's just changing how it's being rendered
Tekyo
Tekyo14mo ago
And how can I fix that?
ἔρως
ἔρως14mo ago
will-change: transform; <-- add this to .btn it's not a perfect fix, but it kinda works
Choo♚𝕂𝕚𝕟𝕘
I 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?
Tekyo
Tekyo14mo ago
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.
Tekyo
Tekyo14mo ago
Tekyo
Tekyo14mo ago
That actually worked! Thank you so much <3
ἔρως
ἔρως14mo ago
you're welcome by the way, the text will look like shit, with some fonts, so, be careful
Tekyo
Tekyo14mo ago
Could I know what's the will-change for?
ἔρως
ἔρως14mo ago
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.
ἔρως
ἔρως14mo ago
in this case, the browser is probably taking some corners when rendering the transition how the browser does it? no idea
Tekyo
Tekyo14mo ago
Alright, got it! Thanks man Appreciate the help ❤️
ἔρως
ἔρως14mo ago
you're welcome just avoid sprinking it all over
Tekyo
Tekyo14mo ago
Yeah, I see that is not recommended to use it a lot
ἔρως
ἔρως14mo ago
yup personally, i wouldn't do any of this scaling stuff, and would just use borders and colors
Tekyo
Tekyo14mo ago
I'll take that into consideration 🙌
Want results from more Discord servers?
Add your server