Create your Own CSS Call-to-Action Button Shortcode

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.

// CALL TO ACTION BUTTONS //



function action_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'title' => 'Title',
                       'subtitle' => 'Subtitle',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="action-button blue-button"><a href="' . $url . '">' . $title . '<span class="subtitle">' . $subtitle . '</span>' . '</a></span>';
}

add_shortcode( 'action-button', 'action_button_shortcode' );

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.

.action-button a:link, .action-button a:visited {
       border-radius: 5px;
       display: inline-block;
       font: 700 16px Arial, Sans-Serif;
       margin: 0 10px 20px 0;
       -moz-border-radius: 5px;
       padding: 14px 18px;
       text-align: center;
       text-decoration: none;
       text-shadow: 0 1px 1px rgba(0,0,0,0.3);
       text-transform: uppercase;
       -webkit-border-radius: 5px;
}

.action-button .subtitle {
       display: block;
       font: 400 11px Arial, Sans-Serif;
       margin: 5px 0 0;
}

.blue-button a:link, .blue-button a:visited {
       background-color: #5E9CB9;
       background-image: -moz-linear-gradient(top, #5E9CB9, #4E7E95);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#5E9CB9), to(#4E7E95));
       color: #FFF;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95');
       -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95')";
}

.blue-button a:hover {
       background-color: #68A9C8;
       background-image: -moz-linear-gradient(top, #68A9C8, #598EA8);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#68A9C8), to(#598EA8));
       color: #FFF;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8');
       -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8')";
}

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:

[action-button title="Subscribe to DIWW" subtitle="Subscribe to our RSS feed" url="http://www.doitwithwp.com/feed"]

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

Subscribe to DIWWSubscribe to our RSS feed

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