Shortcode for Action Button

For functions.php

 /* Shortcode to display an action button. */
add_shortcode( 'action-button', 'action_button_shortcode' );
function action_button_shortcode( $atts ) {
       extract( shortcode_atts(
                       'color' => 'blue',
                       'title' => 'Title',
                       'subtitle' => 'Subtitle',
                       'url' => ''
       return '<span class="action-button ' . $color . '-button"><a href="' . $url . '">' . $title . '<span class="subtitle">' . $subtitle . '</span>' . '</a></span>';

Usage in Post Editor

[action-button color="blue" title="Download Now" subtitle="Version 1.0.1 – Mac OSX" url="#"]

CSS for style.css file

Only includes "blue" styling, add others as you might.

.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')";

Sent in by Matt Adams.


  1. User Avatar
    Permalink to comment#

    thank you for sharing this! it works great…

  2. User Avatar
    Kishore Mylavarapu
    Permalink to comment#

    Great one.Even commenting here on this website makes me crazy..because of this comments system.Great site.

  3. User Avatar
    Permalink to comment#

    thanks , but is not working with IE8 . Any ideas ?

  4. User Avatar
    Permalink to comment#

    This does not work in google chrome, is there a solution to solve it?? thank you

  5. User Avatar
    Permalink to comment#

    Great snippet!
    Why don’t you see a demo of your script?
    Best regards

  6. User Avatar

    It would be great if you can show us some demos :)

  7. User Avatar
    Permalink to comment#

    Yup I was also looking for some demos, but I guess that I will try and update the thread, wish me good luck :)

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.