In this tutorial I’ll show you how to add the shiny hover effect to Divi buttons. It’s an interesting effect that creates the illusion of a shiny glow sweeping across the button from left to right when the button is hovered over.
Table of Contents
Demo
Hover over the demo button below to see the shiny effect in action.
How It Works
To achieve this effect, we’ll use the :before pseudo-element to create the “shiny” element by applying a box-shadow and animating it smoothly from left to right on hover. This will be done using a combination of custom CSS and the Divi Button module settings.
Keep in mind that this hover effect works best on dark backgrounds, so for our demo, we’ll set the row background color to #012839.
Now, let’s create the button.
Step 1. Tweak Divi Button module settings
First, let’s customize the button in the Button module settings to get it ready for the hover effect.
Set the button text and background colors
Our button text color is #00c7ec and it has no background color for the normal state.
However, when hovered over the button text changes to white while it’s background becomes colored (#00c7ec).
Let’s add the button text and background colors for the normal and hovered states of the button in the Button Settings -> Design -> Button
- Enable custom styles for the button
- Set button text color to #00c7ec (normal state)
- Set button text color to #ffffff (hover state)
- Set button background color to #00c7ec (hover state)
Apply the button border and icon settings
Next, let’s apply the button border and icon settings:
- Set button border width to 2px
- Set button border color to #00c7ec
- Set button border radius to 5px
- Use the default icon (>)
- Set the button icon placement to Right
- Show the button icon on hover
Set the button box shadow
Now, let’s set the button box shadow for the normal and hovered states.
Our demo button doesn’t have box shadow in normal state, but it shows when the button is hovered over.
So, let’s apply the box shadow settings in Button Settings -> Design -> Box Shadow accordingly:
- Select any box-shadow preset.
- Set the box shadow horizontal position to 0px
- Set the box shadow vertical position to 0px
- Set the box shadow blur strength to 0px (normal state)
- Set the box shadow spread strength to 0px (normal state)
- Set the shadow color to rgba(0,199,236,0.5)
- Set the box shadow blur strength to 30px (hover state)
- Set the box shadow spread strength to 5px (hover state)
We’ll also use custom CSS to make the box shadow disappear for the active state of the button. This step is optional, depending on your design preferences:
/* remove the active button box-shadow */
.et_pb_button.dvcs_shiny_button:active {
box-shadow: 0 0 0 0 transparent;
}Set the button overflow
The button needs it’s overflow set to hidden for both vertical and horizontal values. This is needed so that the “shiny” element that we will create using custom CSS doesn’t overflow the button top and bottom edges but stays within it’s boundaries.
Let’s set both values to Hidden in Button Settings -> Advanced -> Visibility:
Set the button transitions
To ensure the hover effect runs smoothly let’s set the button transitions in Button Settings -> Advanced -> Transitions:
- Set transition duration to 200ms
- Set transition speed curve to Ease-in
Step 2. Create the button “shiny” element
Let’s create the “shiny” element using the :before pseudo-element of the button:
/* create the "shiny" element */
.et_pb_button.dvcs_shiny_button:before {
content: '';
display: block;
position: absolute;
width: 0px;
height: 86%;
top: 7%;
left: 0%;
opacity: 0;
background: #ffffff;
box-shadow: 0 0 24px 10px #ffffff;
transform: skewX(-20deg);
}Note that we are using the dvcs_shiny_button CSS class in the selector. We’ll add this custom CSS class to the button later on to activate the hover effect.
Step 3. Animate the button “shiny” element on hover
Now, let’s animate the “shiny” element when the button is being hovered over.
The dvcs_shine animation will move the element from left to right and change it’s opacity from 0 to 1 and then back to 0 in 0.5s.
/* animate the "shiny" element */
.et_pb_button.dvcs_shiny_button:hover:before {
-webkit-animation: dvcs_shine 0.5s 0s linear;
animation: dvcs_shine 0.5s 0s linear;
}
@-webkit-keyframes dvcs_shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@keyframes dvcs_shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}Step 4. Add the combined custom CSS
Combine all CSS snippets provided above and add it to your site either in Divi -> Theme Options -> General -> General -> Custom CSS field or in the styles.css file of your child theme.
Alternatively, you can use a Code module if you want this CSS to load on specific parts of you site only rather than globally.
/**
* Add the Shiny Hover Effect to Divi Buttons
* @site https://divicio.us
*/
/* remove the active button box-shadow */
.et_pb_button.dvcs_shiny_button:active {
box-shadow: 0 0 0 0 transparent;
}
/* create the "shiny" element */
.et_pb_button.dvcs_shiny_button:before {
content: '';
display: block;
position: absolute;
width: 0px;
height: 86%;
top: 7%;
left: 0%;
opacity: 0;
background: #ffffff;
box-shadow: 0 0 24px 10px #ffffff; /* play with 60px and 20px values to adjust box-shadow */
transform: skewX(-20deg);
}
/* animate the "shiny" element on hover */
.et_pb_button.dvcs_shiny_button:hover:before {
-webkit-animation: dvcs_shine 0.5s 0s linear;
animation: dvcs_shine 0.5s 0s linear;
}
@-webkit-keyframes dvcs_shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@keyframes dvcs_shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
/* END: Add the Shiny Hover Effect to Divi Buttons */Step 5. Add the shiny hover effect CSS class to the Button module
Finally, let’s activate the shiny hover effect by adding the dvcs_shiny_button CSS class to the button in Button Settings -> Advanced -> CSS ID & Classes -> CSS Class
Final Thoughts
By following the steps outlined in this tutorial we’ve added a sleek shiny hover effect to your Divi buttons.
Feel free to customize the CSS and button settings further to match your design preferences, and keep experimenting with other creative button effects to make your site stand out even more. For example, you can try adding a position-aware hover effect to buttons.
If you have any questions or suggestions on how to improve this effect or customize it further, feel free to share them in the comments. I’m always happy to help and would love to hear your ideas!
Continue Reading: Apply the Blip Effect To Divi Button Module
Hi Ivan.
Great idea!
But for me it worked only in visaulbuilder mode. If i´m looking on page like visitor, working only box shadow, but not shining. Do you know why? -)
Hi Vojtěch. Thanks for stopping by.
If it works in Visual Builder mode then it should work on frontend as well. It’s hard to tell why it won’t work on frontend without a site url, it may be the cache or a CSS conflict or something else
Thank you Ivan!
I was able to get it working for any instance of the “Button Module” but I can’t seem to get it working for the top menu button, or any of the buttons in the “Fullwidth Header Settings”.
I tried going into the “Fullwidth Header Settings” and added the “shiny_button” css class in the Advanced Tab > Custom CSS > Button One but it didn’t seem to carry the effect over.
Do I need to alter the CSS some more to trigger this action in the top Menu & Full Width Section?
Yes, you have to change the CSS selector accordingly.
The CSS snippet from this tutorial will work for the Button Module only, if you want to apply this effect to the Fullwidth Header Module button one then try to use the
.shiny_button .et_pb_button_one(note that there is space between the classes) selector instead of the.et_pb_button.shiny_button.I haven’t tested it but I think it should work. For the menu button you’ll have to adjust the selector in a similar way, e.g. in your case if you add the
.shiny_buttonCSS class to the menu item, then use the.shiny_button .et_pb_buttonselector(again with space in between classes) instead of the.et_pb_button.shiny_buttonselector.Hope this helps.
Hi There!
I’m trying to get my homepage up and running with this cool button but I can’t seem to figure out what’s going wrong.
I want both the buttons on the page as well as the main top button working like this as well.
Can you take a look to let me know where I might be going wrong?
Thank you.
Hi Amanda.
Make sure the shiny_botton class is added to the button and the code is copied properly. It should work if you do everything as explained in the tutorial.
Hi Ivan.
I tried to apply this effect to my other site, but I haven’t had much luck.
Any idea where I might be going wrong?
Hi Frank. If you’ve followed the tutorial then try switching to raw code mode and copy CSS again (hover over the code container above and you’ll see icons on the top right corner). If this does not help share your url, I will take a look.
This is AMAZING Ivan!!
One question,
I have a button in my top menu and I’d like to use it there as well.
futuretechgadgets.com/home/
Any suggestions on how I might be able to make it work for this button too?
Hi Jono.
Well, you’ve added the “shiny_button” class to the menu item rather than to button, so, you’ll need to modify the CSS selector accordingly. Replace every instance of this selector
.et_pb_button.shiny_buttonwith this sector
.shiny_button .et_pb_buttonI didn’t test it but this should make it work, at least partially.
Awesome CSS shine. Gonna start using this everywhere!
Thanks Dan, I am glad you like it.