This is the first 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 with a background that sweeps right when you hover over it.

View The Live Demo

Let’s Get Started Making The Divi Menu Buttons that Sweep Right

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 - SWEEP RIGHT]----------------*/
/*------------------------------------------------*/

	#top-menu li {
		padding-right: 2px;}

	#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 {
		background: #ececec;
		opacity: 1;
		-webkit-transform: perspective(1px) translateZ(0);
		transform: perspective(1px) translateZ(0);
		-webkit-transition-property: color;
		transition-property: color;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;}

	#top-menu-nav > ul > li > a:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #2098D1;
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		-webkit-transform-origin: 0 50%;
		transform-origin: 0 50%;
		-webkit-transition-property: transform;
		transition-property: transform;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;}

	#top-menu-nav > ul > li > a:hover, 
	#top-menu-nav > ul > li > a:focus, 
	#top-menu-nav > ul > li > a:active {
		color: #fff;}

	#top-menu-nav > ul > li > a:hover:before, 
	#top-menu-nav > ul > li > a:focus:before, 
	#top-menu-nav > ul > li > a:active:before {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);}

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.

The following two tabs change content below.

• Bio
• Latest Posts

Geno Quiroz

Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

Latest posts by Geno Quiroz (see all)

• Using Canva.com For Your Blog Featured Images - May 16, 2021
• Setting Up Google reCAPTCHA On Your Caldera Form Using The Caldera Forms Anti Spam Plugin - April 25, 2021
• Elegant Themes Founder Nick Roach: We Want To Flip the Script and Make Divi the Fastest Page Builder Around - April 9, 2021

Receive updates on our latest articles, news and tutorials.

SUBSCRIBE!

You have Successfully Subscribed!