WP SITES

2899

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

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

  3. 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)?

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

Leave a Reply