Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

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(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'subtitle' => 'Subtitle',
                       'url' => ''
               ),
               $atts
       ));
       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.

Comments

  1. melville
    Permalink to comment#

    thank you for sharing this! it works great…

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

  3. Denis
    Permalink to comment#

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

  4. Permalink to comment#

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

  5. Permalink to comment#

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

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

  7. 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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```