Hub5050

CTA Button Styler – Create great CTA’s 

CTA Button Styler
Create great CTA’s 

Enhance your WordPress experience with our Call To Action (CTA) Button Styler, designed to effectively highlight buttons, links, and menu items, transforming them into compelling calls to action. Engage your audience and drive conversions.

Free

Easy Setup

Easy to use
and flexible

Effective
Call To Action

Efficient
use of resources

Style with
your Brand colours

Free Plugin

How does it work?

The CTA Button Styler plugin for WordPress gives you the power to instantly turn plain buttons into high-impact call-to-action elements that grab attention and drive results. By adding a simple cta101 class, your buttons can be styled to stand out, encourage clicks, and guide visitors exactly where you want them to go.

The plugin is lightweight, easy to install, and fully customisable. The CTA Button Styler lets you choose and adjust button designs and hover effects whenever you need – so you can test, refine, and maximise impact. 

It’s easy:

1

Install the plugin

  1. Login to your WordPress Website
  2. Go to Plugins -> Add New
  3. Search for ‘CTA Button Styler’
  4. Click “Install Now” button
  5. Wait for a few seconds to complete the installation.
  6. Click ‘Activate‘
  7. ‘CTA Button Styler’ will now appear in the appearance section in your dashboard

2

Add a class

  1. Navigate to ‘Screen Options’ (top right hand corner of WordPress)
  2. Ensure that CSS classes option has been ticked on
  3. Navigate to the page and button you want to style
  4. Add the class cta101 to any link on your site to convert the link to a button

3

Button styles

1. Log in to the Dashboard and select Appearance
2. Select ‘CTA Button Styler’
3. Update the button settings, button hover styles and button effects
4. Press ‘Save Changes’

4

Style a menu item

1. Log in to the Dashboard and select Appearance ->Menus
2. Select the relevant menu
3. Select the menu item you want to make into a button
4. In the classes field add ‘cta101’
5. The menu item will now will be styled accordingly

Frequently Asked Questions

– generated by FAQ Magic

Yes, this first release of CTA Button Styler is a very straightforward plugin and can be used to create Call to Action buttons on menus and on links.

Yes, the plugin allows you to change colours, button size, hover styles etc. There are a range of styling options to change using the Call To Action Styling option on the WordPress ‘Appearance’ admin dashboard.

Click on Call To Action Styling option on the WordPress ‘Appearance’ admin dashboard.

Simply add the cta101 as class name to the link e.g. class=”cta101″

Log in to the Dashboard and select Appearance->Menus
First ensure that the show menu class option is checked by clicking ‘Screen Options at the top of the screen
Check the CSS classes button option
Switch menu CSS class on
Set the syle on the menu item to ‘cta101’
Menu now will be styled accordingly
Can I style more than one button or link?
Yes, but too many calls to action on any page will defeat the objective. Ideally try to have no more than 2 calls to action visible on any page view.

Only one user defined style is provided in this launch edition of the plugin. However, the code was developed to allow for multiple styles and even for A/B testing of calls to action. If there is demand for this additional functionality, it will be provided in a later version.

The CTA button sometimes has to compete with the styling in the theme and the button then may not appear as it should. Fortunately there is an easy solution to this. Just enclose your menu Navigation Label in the <button>…</button> tags as shown below. Do not include the style tag in the menu CSS field. Everything now should work.

In-line elements (like span and a) ignore vertical (top and bottom) margins and only respect horizontal margins. This is in accordance with the CSS specification. Wherever possible, apply the CTA button class only to block level elements and this issue will not occur.