Adding CSS3 Buttons to your WordPress Theme

This article will demonstrate how to easily add very simple CSS3 (Cascading Style Sheets) Buttons to your WordPress Theme without using Images. You can then implement the buttons throughout your site by using a simple shortcode.

Earn with Bitconnect!Earn with Bitconnect!

CSS3 allows you to take advantage of gradients, rounded corners and shadows. With older Web Browsers that do not support these properties, the Buttons will degrade to having solid color backgrounds without rounded corners and without shadows.

There are two Theme files that require additional code to be added to them. The functions.php file and the style.css file. These can both be found in your Theme’s directory. Use your favorite FTP (or secure FTP) application to move files between your Workstation and Web Server.

If you are using a Child Theme you may need to create a new blank file entitled functions.php in the Child Theme’s directory. Child Themes all require a style.css file by default (you should not need to create this file).

CSS3 Button Style Code

There are numerous online resources that can teach you how to style buttons nicely using modern Cascading Style Sheets (CSS). A good example is the CSS3 Gradient Buttons article at webdesignerwall.com.

Various free button generators such as the CSS3 Button Generator and the Button Maker at CSS Tricks allow you to design your buttons in real-time. When you are satisfied with the design of your button you can then download the CSS code for use on your site.

Older versions of Internet Explorer do not display CSS3 properly. However, CSS3 PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Add the following CSS code to your Theme’s style.css file. This is intended as a simple demonstration. Keep in mind that if you implement your own CSS, you will need to ensure the class name you use is specified in the Function we will be creating next.

.cvbutton {
  color: rgba(0, 0, 0, 0.9);
  padding: 2px 7px 2px 7px;
  background: -moz-linear-gradient(center top , #FFFFFF, #BABABA) repeat scroll 0 0 transparent;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 16px 16px 16px 16px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
}

.cvbutton:hover {
  background: none repeat scroll 0 0 #BEE3FF;
  box-shadow: 0 0 10px rgba(128, 200, 255, 1.0);
  text-decoration:none;
}

.cvbutton:active, button:focus {
  background: -moz-linear-gradient(center bottom , #FFFFFF, #BABABA) repeat scroll 0 0 transparent;
  text-decoration:none;
}

The first style defines how the Buttons will appear by default. The hover style defines how the Buttons will appear when the Mouse Pointer is hovering over them. Finally, the last style describes how the Buttons will appear when they are clicked on.

The Shortcode Function

The next step is to add a Function to your Theme that enables it to handle the new Shortcode for the Buttons. This function will return a styled Button using the CSS class that we defined above.

Add the following PHP code to your Theme’s functions.php file. Make certain to place this code before the closing ?> PHP tag. Also ensure that you do not add any extra spaces or characters after the closing tag.

function cvbutton($atts, $content = null) {
  extract(shortcode_atts(array('url' => ''), $atts));
  return '<a class="cvbutton" href="'.$url.'">'.$content.'</a>';
}
add_shortcode('cvbutton', 'cvbutton');

Using Shortcode in Widgets

If you would like to use your new CSS3 Button (or any Shortcode for that matter) in your Widgets, simply add the following single line to your theme’s functions.php. This is merely an option and is not required if you have no intent on using your Buttons from Widgets.

add_filter('widget_text', 'do_shortcode');

Implementing the new Buttons

Placing a button into your Posts, Pages and Widgets (see above) is as simple as using the shortcode we just defined. You must specify the URL or link where the Button will send the visitor when it is click on.

[cvbutton url="http://computingvoyage.com"]Sample Button[/cvbutton]

Below are a few examples of CSS3 Buttons built using the techniques described in this article. As you can see these are clean, simple and effective.

Sample Button Home Another Sample Button

Earn with Bitconnect!Earn with Bitconnect!

Comments

  1. Good topic. I need to spend a while studying this more.
    Thanks for the wonderful information. I was on the lookout for this for my next project.

Speak Your Mind

*

Read previous post:
Efficient Background Images for your Website

When it comes to creating Background Images for your Website there are two important considerations that can help to increase...

Close