A button from my tiny library. Made in @webflow with custom CSS. I'm using here no position absolute. You can see on hover that two backgrounds moving in and fill the button. Those backgrounds using at the parent display: grid and with grid-area 1 / 1 we can grid pile it. It's like position absolute, only that we are not losing our responsive settings and more. When you look closely there is a stagger on those backgrounds, this works pretty easy in CSS when we give those items a CSS Variable with --index: 0 and --index: 1. Then we can use this variable in the delay to creating a stagger effect: transition-delay: calc(var(--index) * .042s); On the text which moves in I'm using these three propertys: translate: 0 2em 0; rotate: 1 1 .5 -30deg; transform-origin: top right; With separating translate and rotate we can use different transitions on it. With transform we could only use one. --elastic-ease-out: linear( 0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1 ); --smooth-ease: cubic-bezier(.32, .72, 0, 1); transition: translate .75s var(--elastic-ease-out), rotate .5s var(--smooth-ease); This makes the rotating feel smooth, while the moving in has a little bounce at the end. Only the timing needs to be right with the backgrounds moving in. For this the animation tab inside the DEV Tools helps a lot. Check it out live with many other buttons! Link in the comments.