/*wp_block_styles_on_demand_placeholder:69b30bb44cc60*/ /*# sourceURL=wp-block-library-inline-css */

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

Divi Form Builder

Divi Form Builder

From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.

Divi Form Builder
Find out more
Divi Machine

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.      

Divi Machine
Find out more
Divi BodyCommerce

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.    

Divi BodyCommerce
Find out more
Divi Handoff

Divi Handoff

Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.

Divi Handoff
Find out more
Divi Loop Extender

Divi Loop Extender

Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.

Divi Loop Extender
Find out more
Divi Membership

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Divi Membership
Find out more
Divi Machine Accounts

Divi Machine Accounts

Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active

Divi Machine Accounts
Find out more
Divi Ajax Filter

Divi Ajax Filter

Filter WooCommerce, Posts & Custom Posts without reloading the page.    

Divi Ajax Filter
Find out more
Divi Mobile

Divi Mobile

Divi Mobile helps you create beautiful looking mobile menus without having to code.

Divi Mobile
Find out more
Divi Nitro

Divi Nitro

Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.

Divi Nitro
Find out more
Divi Protect

Divi Protect

Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!

Divi Protect
Find out more
Divi Mega Menu

Divi Mega Menu

Create stunning, responsive, and content-rich mega menus using the Divi Builder you already know. No coding required.  

Divi Mega Menu
Find out more