SNIPPET: 4 Styles for Your Divi Menu CTA Button

Copy & Paste todays Freebie Code Snippet for your Divi site.

It is FREEBIE FRIDAY and for this edition, we have 4 Styles for Your Divi Menu CTA Buttons that were lovingly crafted just for you!

These snippets work fantastic with this week’s tutorial on How to Add a CTA Button to the Divi Menu, so pick the button style you like, and get cracking!

Preview:

CTA Style 1
CTA Style 2
CTA Style 3
CTA Style 4

Using the Divi Menu CTA Button Styles:

Step 1) Decide Which Button Style you Like

Just scroll up to see all the styles again.

Step 2) Copy the Corresponding Style Code Below

With your style selected, scroll down to the style number and copy the CSS code and go paste it into the Custom CSS in Divi > Theme Options > Custom CSS

Step 3) Add the CSS Class to Your Divi Menu

Take note of the CSS Class for your button styles then head to Appearance > Menus and add the class to your button menu link.

For step-by-step instructions on how to do all this, check out our post on How to Add a CTA Button to the Divi Menu.

CSS Code for the Divi Menu CTA Button Styles:

Style 1: Full to Hollow Color Transition

Style 2: Skew to Straight

Style 3: Icon Button

Style 4: Gradient Flip

If you loved this FREE Snippet to Style Your Divi Menu CTA Button, you’ll love our other freebies. Click the link below to see other helpful tools to help you grow both your skills and business.

3 Comments

  1. When I scroll down, the text color of the button changes from white to black. How do you make it stay white. Other text on the page is black as I have a white background at the top of the menu.

    • Sorry for the delay

      Could you send a link so I could check the CSS please?

  2. love this. thank you so. much

Submit a Comment

Explore more from Divi Engine