• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Call To Action Button With Shortcode

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

Reader Interactions

Comments

  1. john says

    June 6, 2014 at 6:53 pm

    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
  2. Colin Crawford says

    April 9, 2013 at 9:19 am

    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
    • Brad Dalton says

      April 9, 2013 at 4:47 pm

      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
  3. Anita says

    April 9, 2013 at 1:06 am

    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
    • Brad Dalton says

      April 9, 2013 at 4:50 pm

      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

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags