Create and animate a custom button in
Ding ding Time for a Snack 🥪
Another snack cooked with love by Balerein. In this video, we gonna see how to create a create and animate a custom button in @Webflow
Hope you enjoy it 😊
CLONABLE: https://webflow.com/made-in-webflow/w...
===
THE RECIPE
Set up the button:
.button-circle:
15rem/15rem radius50%
flex-center/align-center
bg.colour
position-relative
.wrapper-tittle
auto
position- absolute
add a heading
.button-circle .is-overflow
add a different class to each .wrapper-tittle
.is-one
.is-two
.is-three
Set an Animation on .button-circle
On-hover:
.wrapper.title .is-one :move ( initial state 0%)
.wrapper.title .is one :move ( 400%)
.wrapper.title .is-two :move ( initial state -200%)
.wrapper.title .is-two :move ( 200%)
.wrapper.title .is-three :move ( initial state -400%)
.wrapper.title .is-three :move ( 0%)
ON-hover-out
keep the initial state ( remove the initial state set)
delete the other ones
===
Le studio
👉 https://www.tambien.studio/
✌️ [email protected]
===
📢. Twitter: / tambien_studio
🗣️. Linkedin: https://bit.ly/3lWUAGD
===
#webdesign #webdevelopment #webflow #productdesign #adobexd