CTA Menu Button

Divi Toolbox  Header ➜ Add CTA Menu Button

 

You can easily change one (or more) of the Primary Menu items to a Call To Action Button-style link. You can choose to apply this style to the first or the last menu item, or to the link with a custom CSS class of cta-link.

If you’d like to apply this style to a menu item which is not the first nor the last one, follow these steps:
1. Navigate to Appearance ➞ Menus
2. Click on the Screen Options button in the top right corner of the Dashboard

3. Make sure that the “CSS Classes” option is enabled
4. Click on one of the menu items and add a CSS class of cta-link
5. Save your menu.

Note for advanced users: If you decide to add your own custom CSS to the button, you should know that there’s an additional <span> element added inside the standard link, and all the styles from the Customizer are applied to the <span> tag and not directly to the <a> element. So, to target it, you would use CSS like .cta-link a span {…some code…}

 

Toolbox Customizer  Header ➜ CTA Menu Button

Here’s the list of all the settings you can easily change:

  • Button font family
  • Button font weight
  • Button font size
  • Button letter spacing
  • Button text transform (uppercase, lowercase, capitalize)
  • Button text color
  • Button background color
  • Button border color
  • Button border width
  • Button border radius
  • Button padding

HOVER STATE

  • Button text hover color
  • Button background hover color
  • Button border hover color
  • Button hover effect (Grow, Shrink, Move Up, Move Down, Wobble, Heartbeat, Jello, Pulse)

 

Hi there!

If you have any questions or would like to get in touch, please fill the form below and we’ll get back to you as soon as possible.

Did you know?

You can create popups and effects like this one with Toolbox! It's so easy!

Ahhh yes!

You officially know the power of the irresistible 3D Button :D

You can easily design Popups like this one using Toolbox and Divi Builder!

Did you know?

Do you like this landing page? Does it look pretty advanced? Well, guess what! We didn’t use even a tiny bit of custom CSS or JavaScript to build it. All the awesome effects have been created using the Divi Toolbox!

Pricing

Choose the plan to suit your needs