Apply the Blip Effect To Divi Button Module

by | Apr 17, 2017 | 2 comments

In this tutorial we are going to implement a nice “blip” effect to Divi button module which might help you draw your readers’ attention to the CTA button on your site. I am providing three different code snippets for the same effect but for different button settings, see the demo below.

Demo:

Button-1

(no icon)

Button-2

(icon shows on hover)

Button-3

(with icon)

Besides applying the code of the effect itself you’ll also need to apply the specific code snippet that will make this effect work fine with different button settings – whether you want it to be without icon or with icon showing only on hover or showing always. These snippets/fixes are provided too. The drawback of this effect is that it won’t let us set the icon on lefthand side of the button because the ::before pseudo-element – which is used for this purpose – is reserved for the effect to function properly. Now let’s start with the implementation.

Step 1:

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).

Button-1 

Despite the fact that this button does not have icon we have to enable it in settings anyway and set its placement to Left . Normally if it is set to Left, then the ::before pseudo-element is used to display the icon, but because we’ve already reserved the ::before pseudo-element for our blip effect the icon will never show on the left side of the button leaving us the only option to show it on the right side of the button, in this case the ::after pseudo-element being used.

Button-2 

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.

Button-3 

This button has the icon which is shown always, not only on hover. Set the Button Icon Placement to Right and Only Show Icon On Hover for Button option to No.

Step 2:

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:

Copy the blip effect CSS code snippets below and add them into Divi -> Theme Options -> General -> Custom CSS field.

CCS code snippets for blip effect

First copy this CSS code, it is used for all 3 buttons:

General CSS
/* 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 code snippets for each button below and add them into Divi -> Theme Options -> General -> Custom CSS  field.

Button-1 (use "BUTTON-1" CSS class)

/******************** 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: -0.62em !important;
 width: 100% !important;
}

Button-2 (use "BUTTON-2" CSS class)

/******************** Button-2 ********************/
.et_pb_button.blip-effect.BUTTON-2:before {
  margin-left: -0.62em !important;
  width: 100% !important;
}
.et_pb_button.blip-effect.BUTTON-2:hover:before {
  margin-left: -0.56em !important;
  width: 104% !important;
}
.et_pb_button.blip-effect.BUTTON-2:after {
  margin-left: 0px !important;
}

Button-3 (use "BUTTON-3" CSS class)

/******************** Button-3 ********************/
.et_pb_button.blip-effect.BUTTON-3:before {
  margin-left: -0.56em !important;
  width: 104% !important;
}

Hope you’ll find this effect useful. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends! 😉

Pin It on Pinterest

Shares
Share This