Call To Action Button With Shortcode

Apr 8, 2013

—

There’s some excellent free online button code generators which make it easy to create the code for making buttons. And there’s some free button maker plugins which also do a nice job of creating and displaying buttons using shortcodes.

But what if you also want to display a short description below your main button text?

The code below makes this possible so once you’ve added the different code to your child themes files, its simply a matter of customizing the HTML within the shortcode and pasting it any where you need to display the button in your theme.

Add this code to the end of your child themes 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')";
}

Add this PHP code to the end of your child themes functions.php file.

Add the shortcode to your WordPress editor and add the url which you want to link. Modify the text to your own.

Works in I.E.

Don’t forget you can also execute shortcodes anywhere your theme provides a hook using PHP code.

Source: CSS Tricks

Comments

5 responses to “Call To Action Button With Shortcode”

john

June 6, 2014

Hey, How can i add “call to action” and if someone click on it the smart phone it will dial the number automatic?
website is:

thanks.

Log in to Reply
Colin Crawford

April 9, 2013

Hi Brad
You are telling us to add the shortcode to the style sheet, surely it should be the functions.php file…..

Colin

Log in to Reply
1. Brad Dalton
  
  April 9, 2013
  
  Hi Colin. The shortcode gets pasted in the editor or widget area’s if you’ve added support for shortcodes in widgets. Is it working for you? I did test this locally and the button looked great which is why i shared it.
  
  Log in to Reply
Anita

April 9, 2013

Hi Brad:

With regard to the above php code snippet, did you mean to say that it’s to be added to the functions.php (and not to the style.css)?

Log in to Reply
1. Brad Dalton
  
  April 9, 2013
  
  Hi Anita. Paste the CSS at the end of your child themes style.css file. Paste the PHP code at the end of your child themes functions.php file. And paste the Shortcode with your HTML into your WordPress text editor.
  
  If it doesn’t display the button, grab the code from the original source and try again. I did test it locally and it looks really good but when i tested it on my live site, it didn’t work. haven’t had time to work it out.
  
  Log in to Reply