In this tutorial I’ll show you how to implement the blip effect for Divi Button module which might help draw your readers’ attention to the CTA buttons on your Divi site. It’s perfect for boosting engagement and conversions.
I am providing three different CSS snippets for the same effect but for slightly different button configurations, see the demo below.
Table of Contents
Button Blip Effect Demo
Button-1
(no icon)
Button-2
(icon shows on hover)
Button-3
(with icon)
Besides applying the general CSS of the effect itself you’ll also need to apply specific CSS snippets that will make this effect work with different button icon configurations – whether you want the button to be (1) without icon, (2) with icon showing only on hover, or (3) with icon showing always.
Note: The drawback of applying this effect to Divi Button module is that it won’t let us set the icon on lefthand side of the button because the ::before pseudo-element is reserved for the blip effect to function properly.
Now let’s start with the implementation.
Step 1: Enable Divi Button Icon
For this effect to work you will need to enable the button icon first.
Then apply the following settings for each button (Button-1, Button-2 and Button-3 of the demo above).
Despite the fact that Button-1 does not dispaly the icon we still need to enable it in the settings and set its placement to Left.
Normally, if it is set to Left, then the ::before pseudo-element is used to display the button icon.
However, since we’ve already reserved the ::before pseudo-element for our blip effect the icon will never show on the left side of the button.
And this leaves us with the only option to show it on the right side of the button, in this case the ::after pseudo-element being used.
This button has the icon which is shown on hover only.
Set the Button Icon Placement to Right and Only Show Icon On Hover for Button option to Yes.
This button has the icon which is shown always.
Set the Button Icon Placement to Right and Only Show Icon On Hover for Button option to No.
Step 2: Add CSS Classes To Divi Button Modules
Add the blip-effect CSS class and the CSS class provided for each button to Button Module Settings -> Custom CSS -> CSS Class field like it is indicated in the image below.
Step 3: Add The Button Blip Effect Custom CSS
Copy the blip effect CSS snippets below and add them into Divi -> Theme Options -> General -> Custom CSS field.
Blip Effect General CSS
First copy and add this CSS, it is used for all 3 buttons:
/* General CSS */
.et_pb_button.blip-effect {
-webkit-animation: button-bounce 2200ms forwards infinite cubic-bezier(0.165, 0.84, 0.44, 1);
animation: button-bounce 2200ms forwards infinite cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.et_pb_button.blip-effect:before {
background-color: #f48969 !important; /* define your color here */
content: "" !important;
display: block !important;
top: 0px !important;
height: 100% !important;
border-radius: 5px;
-webkit-animation: button-blip 2200ms forwards infinite cubic-bezier(0.215, 0.61, 0.355, 1);
animation: button-blip 2200ms forwards infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@-webkit-keyframes button-bounce {
0% {
transform: scale(1);
}
10% {
transform: scale(0.96);
}
20% {
transform: scale(1.04);
}
52%,
100% {
transform: scale(1);
}
}
@keyframes button-bounce {
0% {
transform: scale(1);
}
10% {
transform: scale(0.96);
}
20% {
transform: scale(1.04);
}
52%,
100% {
transform: scale(1);
}
}
@-webkit-keyframes button-blip {
0% {
transform: scaleX(1) scaleY(1);
opacity: 0;
}
10% {
transform: scaleX(1) scaleY(1);
opacity: 0.7;
}
30%,
99% {
transform: scaleX(1.15) scaleY(1.35);
opacity: 0;
}
100% {
transform: scaleX(1) scaleY(1);
opacity: 0;
}
}
@keyframes button-blip {
0% {
transform: scaleX(1) scaleY(1);
opacity: 0;
}
10% {
transform: scaleX(1) scaleY(1);
opacity: 0.7;
}
30%,
99% {
transform: scaleX(1.15) scaleY(1.35);
opacity: 0;
}
100% {
transform: scaleX(1) scaleY(1);
opacity: 0;
}
}
/* End General CSS */Then copy the CSS snippets for each button below and add them into Divi -> Theme Options -> General -> Custom CSS field as well.
Button-1
CSS Class: BUTTON-1
/******************** Button-1 ********************/
.et_pb_button.blip-effect.BUTTON-1 {
padding-left: 1em !important;
}
body #page-container .et_pb_button.blip-effect.BUTTON-1,
body #page-container .et_pb_button.blip-effect.BUTTON-1:hover {
padding-right: 1em !important;
}
.et_pb_button.blip-effect.BUTTON-1:before {
margin-left: -1em !important;
width: 100% !important;
}
Button-2
CSS Class: BUTTON-2
/******************** Button-2 ********************/
.et_pb_button.blip-effect.BUTTON-2:before {
margin-left: -0.5em !important;
width: 100% !important;
}
.et_pb_button.blip-effect.BUTTON-2:hover:before {
margin-left: -0.5em !important;
width: 104% !important;
}
.et_pb_button.blip-effect.BUTTON-2:after {
margin-left: 0px !important;
}
Button-3
CSS Class: BUTTON-3
/******************** Button-3 ********************/
.et_pb_button.blip-effect.BUTTON-3:before {
margin-left: -0.4em !important;
width: 104% !important;
}Save the theme options and that’s it, that’s how easily you can add this beautiful blip effect to Button modules on your Divi site!
Hope you’ll find this button effect useful. Feel free to share your thoughts and suggestions below and don’t forget to share this tutorial with your friends! ;)
Continue Reading: Add the Shiny Hover Effect to Divi Buttons
Is there a way to add this effect to caldera forms button here vervetex.com/contact-us
Wooooow this is the paradise of the beautiful buttons. Thank you so much!
You are welcome, Razvan, more cool stuff coming soon :).