Divi Theme 3 Fun CTA Module Button Animations
How to add eyecatching CTA button animations with the Divi Theme. In this video we will be showing how to create this using a bit of custom CSS ( Below ). Today we will be demonstrating how to create this feature with the Additional CSS Panel and Divi Call To Action Modules. Once created these animations can easily be applied to any Module that has a link in it
So follow along with this video to see how to create this with your Divi site.
In this video we will cover:
Adding A Divi Call To Action Module.
Adding The CSS The Code.
Adding A CSS Class Name.
Publishing The Code.
Shake Animation.
Bounce Animation.
Spin Animation.
We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website.
Using animations in web design can provide numerous benefits to the user experience and the overall aesthetic of a website. Here are some key advantages:
Visual Appeal: Animations can make a website more engaging, visually appealing and memorable. They can add a layer of sophistication to a site, making it stand out from competitors.
User Experience: Animations can help users navigate a website by providing visual cues for important actions, transitions, and changes in content. They can also add interactivity, making a site feel more intuitive and user-friendly.
Communication: Animations can convey complex ideas or data in an easy-to-understand way, making them a powerful tool for communicating with users. They can also add personality and branding to a site.
Performance: With advancements in web technology, animations can be lightweight and optimized for performance, improving page load times and overall site speed.
Overall, using animations in web design can enhance the user experience, communicate information effectively, and make a website more visually appealing, leading to increased engagement and a stronger online presence.
CSS CODE USED TODAY
( Copy and paste into your Additional CSS Panel )
/* CTA Button Hover Animations */
.shakep a:hover {
animation: shake 1s;
}
@keyframes shake {
0% {
transform: translateX(0);
}
12.5% {
transform: translateX(5px);
}
25% {
transform: translateX(-5px);
}
37.5% {
transform: translateX(5px);
}
50% {
transform: translateX(0);
}
62.5% {
transform: translateX(3px);
}
75% {
transform: translateX(-3px);
}
87.5% {
transform: translateX(3px);
}
100% {
transform: translateX(0);
}
}
.bouncet a:hover{
animation: bounce .5s;
animation-iteration-count: 3;
}
@keyframes bounce {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.rotx a:hover{
animation: xrot 1s;
}
@keyframes xrot {
0% {
transform: rotateX(360deg);
}
50% {
transform: rotateX(0);
}
100% {
transform: rotateX(360deg);
}
}
Try out the Divi theme:
Divi Supreme Modules Pro Plugin 10% Off:
Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/?ref=6
Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: https://youtu.be/WDo07nurfUU
Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw
Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1
Free Stock Photos
Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.
There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.
Free Stock Photos – Where to get an unlimited supply
Latest YouTube Videos
