#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;
}