How To: Easy CTA Button with CSS in WordPress

Adding a call-to-action (CTA) button to your navigation menu can help draw attention to important links, such as a contact page or special offers. Here’s a step-by-step guide on how to turn an ordinary navigation item into a CTA button using CSS in WordPress:

Step 1: Add a CSS Class to Your Menu Item

1. Navigate to Appearance > Menus: In your WordPress dashboard, go to the Menus section under Appearance.
2. Enable CSS Classes: At the top right of the screen, click on Screen Options and ensure that CSS Classes is checked. This will enable the CSS class field for each menu item.
3. Assign a CSS Class: Find the menu item you want to style as a CTA button (e.g., Contact). In the CSS Classesfield, add a class name like menu-cta. This class name will be used to target and style the button with CSS.
4. Save Menu: Don’t forget to click Save Menu after making changes.

Step 2: Add Custom CSS

1. Go to the Customizer: In the WordPress dashboard, go to Appearance > Customize.
2. Open Additional CSS: Scroll down and click on Additional CSS to open the custom CSS editor.
3. Add Your CSS Code: Below is an example of CSS code that will style your navigation item as a CTA button:

/* Style the CTA button */
.menu-cta a {
    background-color: #ffffff; /* Background color */
    color: #0073e6; /* Text color */
    padding: 10px 20px; /* Padding */
    border: 2px solid #0073e6; /* Border */
    border-radius: 5px; /* Rounded corners */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    line-height: 50px; /* Line height for centering */
}

/* Hover effect */
.menu-cta a:hover {
    background-color: #0073e6; /* Background color on hover */
    color: #ffffff; /* Text color on hover */
    border-color: #0073e6; /* Border color on hover */
}

Step 3: Preview and Publish

1. Preview Changes: As you add the CSS code, you should see the menu item transform into a button. Make any necessary adjustments to the colors, padding, or font size to match your site’s design.
2. Publish: Once you’re happy with the design, click Publish to apply the changes to your site.

Troubleshooting Tips

• Check Your Class Name: If the styling isn’t applying, double-check that the class name (menu-cta) is spelled correctly and matches what you entered in the menu item settings.
• Test Across Devices: Ensure the button looks good on both desktop and mobile devices, and make adjustments if needed.

With this simple approach, you can easily enhance your navigation with a standout CTA button that draws attention and encourages clicks.