Create a Stunning Animated Button with Elementor Pro for your website

#wordpress #wordpresstutorial #elementor #figma #button #animation #developer #responsive
Today you learn a super skill 🦾: How to animate buttons so users have fun interacting with your call-to-actions. After 5 minutes you’ll get the concept, after 10 minutes you’re a pro!

▶️ Chapters
00:00 1 – Intro
00:14 2 – Our to-do-list
00:22 3 – The quick setup
00:41 4 – The setup in the Elementor editor
01:11 5 – How we’re gonna construct the button
01:38 6 – Now we’re gonna build the button
02:52 7 – How to build the grey line with ::before
04:41 8 – How to build the black line with ::after
05:13. 9 – How to animate the black line
06:40 10 – First trick: How to change the size of the icon
07:04 11 – Second trick: How to always control the length of the lines
09:35 12 – Finish: The animation works!

☕ Liked the vid? I like coffee. Would you buy me one? 😊👍🏻 Ko-fi.com/designfordevs 🙏🏻

✨ Plugins:
Elementor Free: https://bit.ly/elementrfree
Elementor PRO (Optional): https://bit.ly/Elmntrpro

Checkout my agency 👨🏻‍💻: https://sonder.design

The CSS-code:

selector::before{
content: ”;
position: absolute;
bottom: -6px;
left:0;
background: #ccc;
width: 100%;
height: 2px;
}

selector::after{
content: ”;
position: absolute;
bottom: -6px;
left:0;
background: #161616;
width: 0%;
height: 2px;
transition: width 0.4s ease-in-out;
}

selector:hover::after{
width: 100%;
}

selector svg{
font-size: 14px
}

/* This ensures that the lines are always as long as the button itself. */
.elementor-widget-button{
width: fit-content;
}