How to Easily Create a Divi Menu Button in Divi 4.0+

by | Nov 23, 2020 | DIVEMBER, Divi Tutorials | 18 comments

Welcome to D I V E M B E R (Divi + November) here at Divi Life! All month long during November we’re going LIVE on Facebook & YouTube, and publishing new tutorials, freebies, new product features, new product releases, and more! Make sure you subscribe to our email list so you don’t miss any of the action or awesome free stuff! And, follow us on Facebook & YouTube to be notified when we go LIVE.

In today’s tutorial, I’m going to show you how to add a call to action button to your Divi Menu!

This method words on the default header, AND headers/menus that are created with the Divi Theme Builder (Divi 4.0+).

How to Add a Call to Action Button to Divi Menu

  1. Add the CSS Class divi-life-cta-menu to the Menu Item
  2. Add the CSS Code to Style the Link to Look Like a Button
  3. Optional: Add our “Attention Grabber” CSS to Grab User’s Attention

Sounds simple right? It really is! Let’s dive in!

Step One: Add the CSS Class divi-life-cta-menu to the Menu Item

Go to WP Admin > Appearance > Menus, and turn on the CSS Classes option in Screen Options.

Then, open up the menu item you’d like to transform into a button, and paste the CSS class divi-life-cta-button as shown in the screenshot below:

Step Two: Add the CSS Code to Style the Link to Look Like a Button

Now that the CSS class has been added, we can now add the CSS code. Copy and paste the CSS code below to the custom CSS box within Divi Theme Options, or in your Divi Child Theme.

.divi-life-cta-menu a {
  background-color: #44ceb0;
  padding: 15px 25px !important;
  border-radius: 25px;
  text-transform: uppercase;
  color: #fff !important;
  text-align: center;
}

That’s it! Once that’s saved, your menu link will now be a menu button! You can of course customize the color, padding, and border radius, by adjusting the CSS.

Step Three: (Optional) Add our “Attention Grabber” CSS to Grab User’s Attention

Call to Action buttons in the menu have become extremely common. While they’re intended to stand out from the rest of the menu, they don’t have the same impact as they used to since users have grown so accustomed to them. (sort of like ad blindness!)

So how do we make them standout? We add some slick animations! But be careful with this. You don’t want to go overboard and annoy your visitors.

We have some simple animation you can easily add to your menu button to help it really stand out! Here’s what they look like:

Here’s how to add the Call to Action Attention Grabbers:

  1. Add either of the CSS classes to your menu CSS Field (with a space after the previous class we added above)
    1. Wiggle: divi-life-wiggle
    2. Breathing: divi-life-breathing
  2. Next, add the CSS code below to your Divi Theme Options (or your child thee style.css file).
.divi-life-wiggle {
	box-shadow: 0 0 1px transparent;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    animation-name: wiggle;
    -o-animation-name: wiggle;
    -ms-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -webkit-animation-name: wiggle;
    animation-duration: 5s;
    -o-animation-duration: 5s;
    -ms-animation-duration: 5s;
    -moz-animation-duration: 5s;
    -webkit-animation-duration: 5s;
    animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-play-state: running;
    -o-animation-play-state: running;
    -ms-animation-play-state: running;
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running;
}

.divi-life-breathing {
	-webkit-animation:divi-bar-breathing 7s ease-out infinite normal;
	animation:divi-bar-breathing 7s ease-out infinite normal
}


@keyframes wiggle{2%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}4%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}6%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}8%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}10%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}12%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}14%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}16%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}18%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}20%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}.divi-bar-breathing{-webkit-animation:divi-bar-breathing 7s ease-out infinite normal;animation:divi-bar-breathing 7s ease-out infinite normal}@-webkit-keyframes divi-bar-breathing{0%{-webkit-transform:scale(0.9);transform:scale(0.9)}25%{-webkit-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes divi-bar-breathing{0%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}25%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}100%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}}

That’s it! Let us know what you think in the comments, and don’t forget to subscribe below to get access to all of our Divi Tutorials, Freebies, and more.

18 Comments

  1. Avatar

    Tim, I may have missed it in your live stream but what is the purpose of the “@keyframes wiggle…. ” section at the bottom of the code? Isn’t the wiggle covered in the .divi-life-wiggle{ code at the beginning?

    Reply
    • Avatar

      Hey Mickey! So the keyframes is necessary for the animations. It’s essentially what creates and defines what the animation looks like (What’s happening, the position, etc). And then the rest of the CSS is actually adding the animation to the specific CSS class and defining how quickly it should run, etc.

      Reply
  2. Avatar

    It also works on other Divi elements. : )

    Reply
  3. Avatar

    Fabulous, you solved my problem. However, is it possible to have have a different color then the other buttons, like for example when your on the home the color of the home button should be different!?

    But, I am already saved by this little tutorial. Thank you sir for sharing.

    Reply
    • Avatar

      absolutely! This should do the trick:

      .home .divi-life-cta-menu a {
      background-color: #000;
      }

      Reply
  4. Avatar

    Hi! It looks like the button color changes to black when scrolling down. How do you ensure that the fixed menu text color for the CTA button stays white?

    Reply
    • Avatar

      Try changing the beginning of the CSS to this:

      .divi-life-cta-menu a, .et-fixed-header .divi-life-cta-menu a {

      Reply
  5. Avatar

    Thanks for the animation. The button did not work for me, for some reason, bit dissapointed, not sure how to fix it…

    Reply
    • Avatar

      Hmm sorry to hear that. Without seeing the link there’s not much I can do to help unfortunately. 🙁

      Reply
  6. Avatar

    Hi Tim,

    I followed your instructions but my button text color goes from white (the color I set in the CSS) to dark grey. I can’t get it to stay the color I picked. Any idea why that would be?

    Thanks for the tutorial.

    Reply
    • Avatar

      Try changing the CSS to this:

      .divi-life-cta-menu a, .et-fixed-header .divi-life-cta-menu a {

      Reply
  7. Avatar

    This is great thank you for the tips! Having issues with the padding and the button being offset in regards to height in my menu bar. Any thoughts?

    Reply
    • Avatar

      Hmm it’s hard to say without seeing it, but it’s likely something that can be easily adjusted with CSS. Try adjusting the margin-top of the button 🙂

      Reply
      • Avatar

        I think that the size of the button get smaller or bigger when at the same time, I minimize or maximize the logo or the letters. Is it possible to set the size of the top and bottom?
        Thank you!

        Reply
  8. Avatar

    Super helpful, thanks!

    Do you know how I can keep the button letters white? Every time I scroll down, it returns to the basic navbar color.

    Reply
    • Avatar

      Try changing the CSS to this:

      .divi-life-cta-menu a, .et-fixed-header .divi-life-cta-menu a {

      Reply
  9. Avatar

    I love being able to add animation, it really steals the show! Thank you

    I’m wondering if there is a way to color the “cta” text white overriding the text setting in the menu module?

    here is what I have so far votecathryn.com

    I love Divilife!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This