Appearance

Beginning HTML »How to Make a Call-to-Action Button

Have you ever heard the phrase “call to action” and wondered what it meant? In web terms, a call to action is usually an enticement for someone to visit a link, and that link is often designed to look like a button, ready to be clicked. Maybe you’d like visitors to head straight to your Services page? Or perhaps you’d like them to check out your latest recipe, or sign up for your newsletter?

No matter where you’d like your visitors to go, here are a few different ways to make call-to-action buttons on WordPress.com.

Built-in Button Styles

Some themes come with button styles built into the theme, which you can apply to a regular link by switching to HTML view in the post or page editor, and adding the theme’s special CSS style — called a “class” — to the link, which is also known as an anchor tag.

For example, the theme Goran comes with a button style called (get ready for it!) button — and you can add that class to a link, to make it look like this:

Goran button example

This is what the HTML for the button on the demo looks like:

<a class="button" href="https://gorandemo.wordpress.com/">Button</a>

If you visit the Goran demo, you’ll notice that the button background changes color whenever you put your cursor over it on a desktop or laptop computer — that “hover state” is also defined by the CSS within the theme.

You can find out whether a certain theme comes with a built-in button style — and what specific class name you should add to your anchor tag — by visiting its showcase documentation. You can see a couple of examples of ready-made call-to-action button styles on the Edin, Gateway, Sequential, Pique, and Karuna themes.

If your theme doesn’t come with predefined button styles, consider the following techniques to create your own buttons.

↑ Table of Contents ↑

Custom CSS Button Styles

If you have Custom Design — included with the WordPress.com Premium and Business plans — you can add your button styles to your Customizer’s CSS panel.

For example, here’s some basic button styling:

.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  border: 0;
  font-weight: bold;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
  background: #615f8b;
  color: #fff;
}
/* Add a rollover background colour but keep the text white */
.button:hover,
.button:focus,
.button:active {
  background: #b7b6cd;
  color: #fff;
}

The HTML part for the anchor tag would look very similar to the first example:

<a class="button" href="YOUR-LINK-HERE">Sign up for my Newsletter</a>

Just replace YOUR-LINK-HERE with the full URL (web address) for the page you’d like visitors to go to, starting with http:// or https://. For example, if you’d like visitors to go to your newsletter signup page, you can add its URL.

Here’s what this example would look like on your site:

Button rollover

You’ll notice that the button text is in capital letters, and that’s because we’ve specified uppercase in this line of the CSS:

text-transform: uppercase;

If you prefer not to have it in all caps, just remove that line and it’ll default to a mix of upper and lowercase, exactly as you typed the text.

By keeping the HTML and CSS parts separate, you can add the same button class to multiple buttons, keeping them all consistent, and avoiding repeating the CSS more than once. It also means that if you decide to change something later — say, you’d like all your buttons to have an orange background because it’s October and Halloween is approaching — you can do that in just one place in the CSS, without needing to touch the code anywhere else.

↑ Table of Contents ↑

Inline CSS Button Styles

If you don’t have Custom CSS, there is still a way to create a link with basic button styling, by using what’s called “inline styles.” That means you mix your button CSS directly within your HTML code. You’ll need to flip your editor to HTML view to add the code.

Here’s an example:

<a style="display: inline-block; padding: 12px 24px; border: 0; border-radius: 6px; font-weight: bold; letter-spacing: 0.0625em; text-transform: uppercase; background: #615f8b; color: #fff; text-decoration: none;" href="YOUR-LINK-HERE">Call to Action</a>

There are a few disadvantages to this method: the code is harder to look at and troubleshoot, and you need to repeat all the inline CSS on every button you create, so it’s more cumbersome if you want to change anything later. You also can’t add a rollover (hover) state this way.

Here’s a working button with the inline CSS from above. If you’re on a desktop or laptop computer, try hovering your cursor over it to see how there’s no change in the styling.

Explore the Daily Post

Tips and Resources to Get Started

This tutorial should get you started on your own call-to-action adventure! A few things to note:

  • Don’t forget that buttons can also go inside a Text Widget.
  • New to CSS? Check out our beginner’s guide, which includes links to more resources.
  • If you need more help crafting your CSS, expert volunteers and WordPress.com staff are ready to help over in our friendly CSS Customization forum.

Not quite what you're looking for?

Get Help