Create Better Divi Headers

Add a Shiny Hover Effect to Divi Button

by | Apr 20, 2017 | 12 comments

In this tutorial I’ll show you how to implement a cool shiny hover effect to Divi button module. Hover over the demo button below to see this effect in action.

Demo:

To achieve this effect you’ll need to apply the following advanced design settings and use the CSS code provided below. And also please notice that this effect works best on dark background.

Step 1:

Apply button module advanced design settings

Step 2:

Add the shiny_button CSS class to Button Module Settings -> Custom CSS -> CSS Class field like it is indicated in the image below.

Step 3:

Copy the shiny hover effect CSS code snippet below and add it into the Divi -> Theme Options -> General -> Custom CSS field.

CCS code snippet for “shiny” hover effect

"Shiny" hover effect CSS snippet

[css]
/* Start shiny hover effect*/
.et_pb_button.shiny_button {
overflow: hidden;
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.et_pb_button.shiny_button:hover {
box-shadow: 0 0 30px 5px rgba(0, 199, 236, 0.5); /* set your color here
(it should be the same as the button bg color on hover but with 0.5 opacity)
and play with 30px and 5px values to adjust box-shadow */
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.et_pb_button.shiny_button:hover:before {
-webkit-animation: shine 0.5s 0s linear;
-moz-animation: shine 0.5s 0s linear;
animation: shine 0.5s 0s linear;
}
.et_pb_button.shiny_button:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
.et_pb_button.shiny_button:before {
content: ”;
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: #ffffff;
box-shadow: 0 0 60px 20px #ffffff; /*play with 60px and 20px values to adjust box-shadow*/
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}

.et_pb_button.shiny_button:after {
line-height: inherit !important;
}

@-webkit-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@-moz-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}

/* End shiny hover effect*/
[/css]

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! ;)

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!