Create your Own CSS Call-to-Action Button Shortcode

CSS Call to Action Buttons

Text links aren’t bad, but to really highlight what your readers should do after reading your article, you need to a Call to Action – that is, an element designed to help the reader take the next step (or action).

I decided I needed some here on Do It With WordPress and wanted to encompass it within a shortcode that I create myself, rather than use yet another plugin.

I looked around online for what I was looking for, and it was Chris Coyier from CSS Tricks that got me on the right track.

Create the shortcode

First of all, we’re going to create the shortcode, with several variables. Copy the following code into your functionality plugin, or functions.php if you don’t have one.

This creates a shortcode with three variables: a title, subtitle and the destination URL. That’s all there is to it for that part.

Style the button

Now we’re going to put some styling with the button to make it look really snazzy. I copied this styling directly from the original tutorial, but you can always tweak the colors to help it match your own site. Paste this code at the bottom of your style.css file.

Save that file and now we’re ready to put it into action.

Using the shortcode

When you’re editing your next post, you can insert a call-to-action button by using the shortcode, as shown below:

And when you actually use that code, it will look something like this:

Call to action button

Catches your attention right? That’s the point! Now you can take it and make it your own with your own color scheme.

11 thoughts on “Create your Own CSS Call-to-Action Button Shortcode”

  1. Shaun says:

    Hi Dave

    I followed everything exactly, but all i got was a blue hyperlink with the correct text, but no space between the title and the subtitle.

    When you click the text it goes to the URL but there is no fancy button.

    Any thoughts?

    1. I had that happen to me before and it was because the CSS wasn’t being read properly because a previous ruleset hadn’t been closed. Are you familiar with CSS?

      1. Shaun says:

        Not very familiar. How do i close a ruleset? And does that mean i need to open a new ruleset and put this code in and then close it again?

        1. Shaun, each ruleset is opened and closed by a { and a }. Each set must be complete (i.e. include both an open and a close brace). The general format of your CSS should be:

          .divclass2 {
          example-rule: value;

          See this article for more information about how to format CSS correctly.

  2. Robert says:

    Are there any ways to integrate this shortcode to WordPress Editor? For example, there will be a button on the toolbar, we click on it, enter the link and press OK. After that, the button is ready.

    1. There is a way to do that. I haven’t investigated exactly how to do it, but I know you can add custom buttons to the TinyMCE Editor to do just that.

  3. Hi Dave,

    Nice code. Now, how would I include my G tracking code to the shortcode ?

  4. Maybe this [action-button title=”Subscribe to DIWW” subtitle=”Subscribe to our RSS feed” url=”” ga(‘send’, ‘event’, ‘category’, ‘action’);]

    1. I’m kind of confused. If you have your tracking code applied to every page, you’ll be able to track where users are going to and from on your site. I’ve never heard of applying GA to a specific button or link…

      1. I meant to track “click” events, such as sending a form or accessing contact page, not just where my users are going or where they came from

        1. Honestly, I couldn’t tell you: I’ve never done that, and didn’t even know that you could do that.

Leave a Reply