Liquid & Color Adjustable CSS Buttons
Blog » CSS/XHTML, Design » Liquid & Color Adjustable CSS ButtonsLiquid & Color Adjustable CSS Buttons
September 29th, 2008
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.)
- 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.
- 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).
- 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.
- 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.
Related Posts
Tags: Bevel, Buttons, css, Gloss, liquid
This entry was posted on Monday, September 29th, 2008 at 7:35 pm and is filed under CSS/XHTML, Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
Neat.
I thought of this but ‘cos of IE never ventured.
Thanks for the post
Funny way of making buttons. You should make it with a hover effect too!
The technique you have described is rather useful. However, it has a couple of issues that need to be fixed for the sake of semantics and to achieve a “real” button behavior:
1. You cannot use a “div” element as a wrapper, because this makes the code non-semantic. The button is a clickable element, so you need an “a” tag with two nested elements, rather than a wrapping “div”. You may use display: inline-block for the or play with the line-height in order to make things look well and according to your design;
2. The “button” and “input” are inline elements. Thus, your buttons should behave the same way, i.e. one should not be forced to set float: left in order to align the buttons in a single line.
3. The presence of empty elements, as it is with your “span” is not acceptable, so I can suggest that you rewrite your code with “a” and two nested “span” elements.
Good luck!
Thank you Martin, that was the kind of schooling I was looking for~ Ill give it a shot!
Just superb. thanks for coding this all and putting it online for download. you rock mate.
When seeing the title of this article I initially thought your button example would be fully liquid, scaling in both the horizontal and vertical direction upon font-size increase. Any thoughts on making an updated tutorial with fully liquid buttons?
(Hint: check how Google Analytics does it.)
Just looked at the Google Analytics button, I’m going to be dissecting their technique and try to apply it to this one. Thanks Mike, great idea!
But if you scale the font-size, the button don’t look pretty nice anymore.
Hello again. As a quick follow-up to my yesterday’s comments, I tried to reproduce your excellent idea of buttons with a slightly more semantic markup and “real” button behavior. Here is the download link with my view of the button:
http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=98
I have used an “a” tag with three nested “span” elements.
The Google Analytics button is done in for very smart layers of elements with transparent backgrounds. It’s kinda complicated just for one little button.
I’m using the PS section of your article to make a reusable button. Thanks for the tutorial.
The technique is nice but I wouldn’t use it. It’s easy enough to use layer styles in photoshop if you need a button of a diffrent color. You don’t need to change button colors or design elements often in real life. And even if for some reason you want to be able to have dynamic generated buttons you would be better with using PHP + GD to generate them (an then cache them of course so you don redo them over and over).
The main reason why I don’t like your technique is that it adds extra markup. I am an adept of minimalistic markup. Makes code easy to maintain, lowers bandwidth consumption, etc. One other reason I don’t like the technique is that IE6 and older doesn’t support it without using a PNG transparency hack.
I have been converting my png’s to 8 bit transparent using Fireworks. It looks pretty close and it degrades nicely in IE6. I have been using them for adding nice gradients to my backgrounds. No IE6 specific css or javascript needed. They just disappear. I tried it out with you images and IE6 just renders rounded solid color buttons.
Thank you all for the comments and great ideas.
Jack and Martin had some very good points about semantics and avoiding extra markup.
I have combined the 2 requests and came up with this example.
The only downside of this is that, the button is only liquid to your background button size. In my example, its 600px. What do you guys think? Passable?
My 2nd example is the one Mike had brought up, which was being able to vertically scale as well as horizontal. Now, my example is not usable and its clunky. But if you would like to see it, here’s the link.
Again, this one is not usable…. I’m wondering if someone can take a stab at this?
hey guys! styling links not so difficult. let’s try to make real buttons with button tag.
/me go away to test some ideas…
btw, good idea and great tutorial!