Tutorials

Liquid & Color Adjustable CSS Buttons

Tags: Beginner

When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop. Making future adjustments on the verbiage and colors can be also be time consuming.

By having dynamic buttons, this scenario is much easier to handle, and by having liquid and color adjustable buttons with CSS, we are able to change the verbiage and colors in a flash.

Step 1.
Create a Transparent Button

We will first start off from the button made in my previous tutorial. If you already know how to create buttons in Photoshop, you can just skim through this step.
(If you haven’t checked out my Glossy and Beveled Buttons Tutorial yet, now is a good time. Or if you’re lazy or in a rush, you can download the PSD file here.)

1. We will first open up the file and ditch unnecessary layers like the reflection, shadow, and text. Next, select the “Button Base” layer and let’s turn down the Fill to 0% (Top right corner on the layer palette.) Also in your ‘effects’ get rid of the red gradient Overlay.
   
2. Now we need to select the shape of our “Button Base” layer by clicking on the “Vector Mask Thumbnail” (the thumbnail on the right of the chain icon) while holding the ‘Ctrl’ Key on your keyboard. With the selection highlighted, lets create a new layer (‘Ctrl‘ + ‘Shift’ + ‘N’) and name it “Gradient Fade”. Fill it with a ‘Transparent to Black’ gradient. Tone down the gradient by making the Opacity to 50%. (Now you should have a light grey/gradient button).
   
3. Select the shape of our “Button Base” layer again, and from here we need to invert the selection (‘Ctrl’ + ‘Shift’ + ‘I’). If you did this correct you should see a dotted line around the button and also around the canvas. With the inverse selection still selected, let’s now create a new layer named “Mask” and fill it with a white background.
   
4. Hide and turn off the visibility on the “Background” layer so now should have a transparent background. Now crop the button to 160px by 40px.
   

Step 2.
Slice Buttons

At this point, we now have to slice our button into 3 pieces.
Slice A – Should be the left side of the button, save this image as btn_left.png
Slice B – Should be the center piece that stretches, save this image as btn_stretch.png
Slice C – Should be the right side of the button, save this image as btn_right.png

Step 3.
HTML / CSS

The HTML

<div class="btn"><a href="#">Add to Cart</a><span></span></div>

The CSS

body {
	margin: 0;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.btn {
	float: left;
	clear: both;
	background: url(images/btn_left.png) no-repeat;
	padding: 0 0 0 10px;
	margin: 5px 0;
}
.btn a{
	float: left;
	height: 40px;
	background: url(images/btn_stretch.png) repeat-x left top;
	line-height: 40px;
	padding: 0 10px;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
}
.btn span {
	background: url(images/btn_right.png) no-repeat;
	float: left;
	width: 10px;
	height: 40px;
}

The beauty of this technique comes into play after all of this is done. Now that the button is liquid and transparent, to adjust colors of our buttons, now all we have to do is add a colored background to them.

.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
.btn_learnmore { background-color: orange; }

This is how you would implement these styles in our html.

<div class="btn btn_addtocart"><a href="#">Add to Cart</a><span></span></div>
<div class="btn btn_checkout"><a href="#">Check Out</a><span></span></div>
<div class="btn btn_learnmore"><a href="#">Learn More</a><span></span></div>

Step 4.
Cross Browser Testing

Now we all know IE is a pain. Refer to my previous PNG Transparency Fix in IE6 tutorial, and use the SuperSlight Javascript technique for this example. Here’s the direct link to www.24ways.org’s IE6 Fix tutorial

Conclusion

This idea dawned on me after I was continuously creating multiple image buttons on one of my client’s sites. As you can see, with a quick switch in the style sheet, I am able to adjust all buttons across the site.

I feel this technique still has some refining to do and has room for improvement, so I’m looking forward to anyone that has a better way or can add on to this to make this a better strategy.