This is the fourth in a new series I am starting on turning your Divi Menu links into buttons and giving them some cool hover effects.
In this tutorial I am going to show you how you can make Divi Menu buttons that hover upwards with a radial shadow underneath when you mouse over it.
Let’s Get Started Making The Divi Menu Buttons That Float Upwards with a Radial Shadow
Adding The Custom CSS
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)
Add this CSS.
/*------------------------------------------------*/
/*-------------[GQ - FLOATING SHADOW]-------------*/
/*------------------------------------------------*/
#top-menu li {
padding-right: 5px;}
#top-menu > li > a {
padding: 15px 15px!important;
margin-bottom: 15px;}
#top-menu .menu-item-has-children > a:first-child:after {
display:none;}
#top-menu-nav > ul > li > a {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
background: #3173b5;
color: #fff;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;}
#top-menu-nav > ul > li > a:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;}
#top-menu-nav > ul > li > a:hover,
#top-menu-nav > ul > li > a:focus,
#top-menu-nav > ul > li > a:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
opacity: 1;
background: #154575;}
#top-menu-nav > ul > li > a:hover:before,
#top-menu-nav > ul > li > a:focus:before,
#top-menu-nav > ul > li > a:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);}
Making Adjustments
Now because there are already so many menu padding options available in the Theme Customizer, there is a good chance you may have to adjust the bottom padding of the main buttons. You can change that here.
The following rules change the background colors before and after hover and the font color on hover.
The following rules change the timing of the animation.
And that’s it.
If you used this on one of your projects, please share a link below so we can see how you used it.
Have fun!
Well, that’s all for now. I hope you find this article useful.
Your article is amazing. Thanks for sharing this wonderful tutorial. I will try this in my website.
Interesting shadow effect, I’ll try it on one of my WordPress sites with Divi
thanks a lot