Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

Creating Slick Buttons With CSS3 Multiple Backgrounds

February 22nd, 2010

In this tutorial I’m going to show you how to make a slick button using CSS3 multiple backgrounds. The background property works the same as CSS2, with the exception of allowing you to add additional background images. If you’d like to code along, Download the source files.

Browser Support

Currently, multiple backgrounds are only supported by Safari and Chrome.

The Button Images

We’re going to need to create 3 images for our button. A left cap, a right cap, and a middle which we will repeat. The repeat will allow us to stretch the width of the button to fit our button text. Here’s what the images look like.

Left

Middle

Right

Here’s What the CSS Looks Like

The below styles are the bare minimum you require to get this working. An important thing to note is the order of the images in the background property. The order should be left, right, then middle. The first declared image is the top, the last is the bottom.

.button {
 background: url(left.jpg) top left no-repeat,
 url(right.jpg) top right no-repeat,
 url(middle.jpg) top center repeat-x;
 float: left;
 height: 40px;
}

Here’s What the HTML Looks Like

The HTML for this button is actually quite easy to code. Simply create a new <div> using the .button class. Enter your button text after the <div> tag, then close it.

<div class="button">Hello this is my button</div>

Here’s What it Looks Like

This is what the button should look like with only the essential styles defined.

Adding a Few More Styles

Let’s add a few more styles to clean up the button formating.

.button {
 background: url(left.jpg) top left no-repeat,
 url(right.jpg) top right no-repeat,
 url(middle.jpg) top center repeat-x;
 float: left;
 height: 40px;
 line-height: 40px; /* centers vertically */
 padding-left: 10px;
 padding-right: 10px;
}

.button a {
 color: #fff;
 text-decoration: none;
}

.button a:hover {
 color: #ccc;
 text-decoration: none;
}

Now let’s add the <a href> tag to our button text

<div class="button"><a href="http://yourwebsite.com">Hello this is my button</a></div>

Here’s What it Looks Like

Now that we’ve fixed the button formatting, by adding a few more styles, this is what it should look like in your browser.

LIve Demo

That’s it, that’s all. View the live demo or download the tutorial source files.

Tags: button, css3, multiple-backgrounds