A Guide to Designing Better Buttons and CTAs for WordPress
Buttons and calls-to-action fill up relatively little real estate but they’re some of the most important design elements of any website. Considering their importance, getting buttons and calls-to-action right is sort of a big deal.
However, designing buttons can be tricky. There are many design factors to consider when designing buttons – size, color, icons, shape, placement, and text — and call-to-action buttons are even more critical to get right.
In this post, we’ll cover the basics of designing buttons for your WordPress website. We’ll also consider the factors to take into account when your buttons will be used as part of a call-to-action. Finally, we’ll leave you with code you can use to create buttons and show you how to use that code with WordPress.
Three Principles for Designing Effective Website Buttons
Let’s start with the basics. If you want to create buttons that are effective, you need to follow a few best practices.
These best practices may seem like common sense and that’s because they really are. However, if you’ve never thought about button design before you may find that you’ve been violating some of these principles.
Principle #1: Buttons Should Look Like, Well, Buttons!
In order for a website design to work as intended, buttons need to be easy to pick out. Let’s take a look at how Google does this on their landing page for their analytics product.
While not everyone loves Google’s material design, the buttons in the image above are unmistakable. Buttons should stand out. Buttons that aren’t clearly buttons may experience a markedly lower click-through rate.
Principle #2: Button Actions Should be Clear
When designing buttons, the action associated with each button must be clear. Look back at the image above. The action associated with each button is clear. Use the text or icons on buttons to clearly and succinctly describe the actions each button is designed to perform.
You don’t have to do this with text. Sometimes icons can be just as effective. For example, looking at the same example, we see this icon style button on the right:
The icon on this button communicates something along these lines: “Hey! There’s more stuff over here!” It lets us know that there are additional options available which can be seen by clicking on the button.
Principle #3: Button Design Should be Consistent
Third, when designing buttons make sure that all buttons that perform a similar action have a similar design. Let’s look back at Google once again.
In the image, there are three different button designs. Each button design does something different. The green buttons are a call-to-action — they let you sign up for a service and are the most prominent. The blue arrows let you learn more about each service. The icon button displays more options available on the same webpage.
Throughout this web page this pattern is consistent:
- Round icon buttons perform on-page actions.
- “Learn more” buttons are blue and include an arrow (and sometimes some text).
- Call-to-action buttons are square and green.
As you design buttons for your site, develop a system in which different button designs have different purposes and be consistent in the application of these designs.
How to Make Call-to-Action Buttons Stand Out
Buttons included in call-to-action (CTA) elements are a bit different from the rest of the buttons on your website. That’s because CTA buttons should be designed to encourage a specific action rather than simply serve as a functional UI element. In order to make CTA buttons as effective as possible keep these guidelines in mind:
Use colors that are in high contrast to the background color and stand out from the other UI-type buttons on your site.
Make CTA buttons easy to see and find by sizing them generously and leaving plenty of whitespace around CTA buttons.
Use urgent language when writing the copy for your CTA buttons, especially if you’re making a limited time offer.
Creating Buttons with Code
You could always use a plugin to create buttons, but by coding them yourself you have complete control over the appearance and behavior of your buttons. So, with basic button design principles in mind, let’s take a look at how you can create three common button designs with code: rectangular text buttons, circle icon buttons, and buttons that combine text and icons.
How to Create Rectangular Text Buttons with Code
Text buttons are very easy to create and if you write the code yourself you can fine tune them to look just the way you like.
Let’s start with the HTML markup for a simple text button.
To link this button to a page, add the URL to the anchor element by deleting the pound sign and replacing it with your URL, like this:
The button text can be changed by replacing Buy Now in the button markup with your preferred copy. Below that, a span contains smaller detail text. Simply delete all of the text out of the span if you do you not wish to display detail text.
Next, we need to add some CSS to style the button:
To change the appearance of each button, just edit the CSS at the points indicated by the comments. The CSS above will create a green button with a gray border and rounded corners as shown in the image above.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
How to Create Circle Icon Buttons with Code
These buttons are inspired by the icon buttons at Google Analytics. Thankfully, they’re pretty easy to create.
First, we need to add an icon font to our website. We can do so in a few different ways. If you’re building buttons in a plain HTML document, then just drop this link in the document
head to import Font Awesome.
On the other hand, if you’re adding the buttons straight to WordPress, and your theme doesn’t include Font Awesome icons, then you can enqueue them by installing Enqueue Font Awesome CDN, a free WordPress plugin.
Now, we can write the markup that we’ll use for our icon buttons. To create the four icons in the image above, we’d use this code:
fa fa-angle-left applied to the first
i element is what loads the icon. This is how icons are loaded with Font Awesome and you can see a full list of icons at the Font Awesome website.
This code could be used to generate buttons incorporating any of the Font Awesome icons. For example, to create a Facebook icon, you would use the following code:
Finally, we apply some CSS to turn our markup into buttons:
If you want to use this code on your own site, the comments in the CSS above will help you fine-tune the appearance of your buttons. Note that you may want to tweak icon alignment a bit from one icon to the next. To do that, you’ll need to add the appropriate class to the icon as shown in the HTML markup and adjust the padding applied to the icon using the last section of CSS.
To center the icon don’t add any of the classes prefixed with
How to Create Square Buttons with Text and Icons
With the CSS already in place from the icon and text buttons, creating buttons that combine both text and icons is simple. All we have to do is add an icon the markup of our text button, like this:
As you can see, we’ve used a new icon and reused a class from the icon button styling,
move-left, to create some space between the icon and nearby text.
Adding Buttons to WordPress
There are two steps to take to add buttons to a WordPress website. First, you need to load the CSS. Second, you add the markup on the post or page where you want the button to appear.
You have a couple of options for adding the CSS to your website.
- You could use a child theme and add the CSS to the child theme’s style.css file.
- Now that WordPress 4.7 has rolled out, you could add the CSS to the Additional CSS section of the WordPress customizer.
- You could use a custom CSS plugin.
- If you’re using Upfront, you could add the CSS using the Global Theme CSS option in the Theme Settings panel.
Let’s walk through the steps of adding custom coded buttons to Upfront.
Upfront does include a built-in button element that makes it effortless to create simple text buttons and social media icon buttons. So your basic button requirements are easily met with that feature, but if you want to use custom coded buttons, here’s how you can add them to your website.
Adding Custom Button CSS to Upfront
With Upfront installed and an Upfront theme such as Issue activated, select the Upfront option from the admin menu bar to launch Upfront.
From the left-hand panel, toggle open the Theme Settings menu. Then, scroll down until you see the Global Theme CSS option.
Selecting this option will launch the theme CSS editor. Scroll all the way to the bottom of the existing CSS and paste in the new custom button CSS at the very bottom.
Click Save in the bottom right corner and you’ll be set to add your custom button HTML markup wherever you want a button to appear.
Adding Custom Button Markup to Upfront
Upfront makes it easy to add custom code anywhere on a page. With Upfront launched, toggle open the Draggable Elements panel, locate the Code element, and drag it into the position where you want a button to appear.
Next, paste your button code into the element and click save. Adjust element position and the padding around the element until you’re happy with the results.
I went ahead and modified the colors a bit to match the Issue color scheme and produced a nice user sign-up call to action button.
Coding buttons for your WordPress site is pretty simple and give you the opportunity to try out different colors, button copy, icons, and designs to maximize the effectiveness of UI elements and calls-to-action.