How to Add a Cool CSS3 Button Shortcode in WordPress

If you are not a big fan of working with the HTML editor in WordPress or want to provide some cool enhancements for your premium themes, shortcodes are a great solution for expanding the capabilities of your post editor while keeping things simple.

I was thinking that it would be cool to add some sort of button to my site when providing links to free files or other sites (using shortcodes of course) so after adding the shortcode to my theme I figured I would share the code here on the blog so other people interested in adding button shortcodes to their site could simply copy and paste my code into their theme and not have to spend too much time making the shortcode and styling the button.

What Are Shortcodes?

Shortcodes were introduced back in WordPress 2.5 and they allow you to create macro codes for use in post content. A simple shortcode would look something like this:

[shortcode]

Which when added to the post editor will return the value of the shortcode as defined in your theme files. I will show you how to create a shortcode that will allow you to easily add buttons to your post editor without touching any code.

Adding A Custom “button” Shortcode

First thing you need to do is add the php code for your shortcode to your theme. The following code can be used to add a simple button to your site. This code can be placed in the functions.php file. If you are using a 3rd party theme, this is best done via a WordPress Child Theme.

function myprefix_button_shortcode( $atts, $content = null ) {
	
	// Extract shortcode attributes
	extract( shortcode_atts( array(
		'url'    => '',
		'title'  => '',
		'target' => '',
		'text'   => '',
		'color'  => 'green',
	), $atts ) );

	// Use text value for items without content
	$content = $text ? $text : $content;

	// Return button with link
	if ( $url ) {

		$link_attr = array(
			'href'   => esc_url( $url ),
			'title'  => esc_attr( $title ),
			'target' => ( 'blank' == $target ) ? '_blank' : '',
			'class'  => 'myprefix-button color-' . esc_attr( $color ),
		);

		$link_attrs_str = '';

		foreach ( $link_attr as $key => $val ) {

			if ( $val ) {

				$link_attrs_str .= ' ' . $key . '="' . $val . '"';

			}

		}


		return '<a' . $link_attrs_str . '><span>' . do_shortcode( $content ) . '</span></a>';

	}

	// No link defined so return button as a span
	else {

		return '<span class="myprefix-button"><span>' . do_shortcode( $content ) . '</span></span>';

	}

}
add_shortcode( 'button', 'myprefix_button_shortcode' );

Using The Shortcode In Your Post Editor

Now that you have  a shortcode you can add the new “button” (which looks like a plain link now since we haven’t styled it) to your post editor.

// Example usage 1
[button href="YOUR LINK" target="self"]Button Text[/button]

// Example usage 2
[button href="YOUR LINK" target="self" text="Button Text"]

Styling The Button

What is the point of creating a shortcode if it’s just going to look like a plain link? Nothing. That’s why I will show you how to add some cool CSS3 to style the download button and make it look sexy.

As you noticed in the shortcode I added the class “myprefix-button” so you can easily style it via your style.css file. Insert the following code to your stylesheet to make a nice blue button like the one in the image.

/* Main Button Style */
.myprefix-button{ background:#65A343; text-shadow:1px 1px 1px #000; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-block; overflow: hidden; padding: 1px; vertical-align: middle; }

.myprefix-button span { border-top: 1px solid rgba(255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; color: #fff; display: block; font-weight: bold; font-size: 1em; padding: 6px 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); }

/* Hover */
.myprefix-button:hover{ background: #558938; text-decoration:none; }

/* Active */
.myprefix-button:active{ background:#446F2D; }

Multiple Color Support

If you noticed the shortcode has a color parameter which you can use to add CSS styles for different button colors. For example if you can add a blue color option by adding this extra CSS:

/* Blue Button */
.myprefix-button.color-blue { background:#2981e4 }

/* Blue Button Hover */
.myprefix-button.color-blue:hover { background:#2575cf }

/* Blue Button Active */
.myprefix-button.color-blue:active { background:#0760AD }

Now simply use the color parameter in the shortcode:

[button href="YOUR LINK" target="self" color="blue"]Button Text[/button]