Comments on: Liquid & Color Adjustable CSS Buttons

By: YoYurec

YoYurec — Fri, 03 Oct 2008 15:34:17 +0000

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!

By: Soh

Soh — Thu, 02 Oct 2008 15:17:23 +0000

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?

By: Brian

Brian — Wed, 01 Oct 2008 15:28:24 +0000

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.

By: Jack

Jack — Wed, 01 Oct 2008 10:13:55 +0000

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.

By: wayne

wayne — Wed, 01 Oct 2008 10:13:43 +0000

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.

By: Martin Ivanov

Martin Ivanov — Wed, 01 Oct 2008 08:29:38 +0000

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.

By: Webstandard-Team

Webstandard-Team — Wed, 01 Oct 2008 07:16:45 +0000

But if you scale the font-size, the button don’t look pretty nice anymore.

By: Soh

Soh — Wed, 01 Oct 2008 06:59:36 +0000

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!

By: Mike Rundle

Mike Rundle — Tue, 30 Sep 2008 20:03:17 +0000

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.)

By: Rahul

Rahul — Tue, 30 Sep 2008 17:28:48 +0000

Just superb. thanks for coding this all and putting it online for download. you rock mate.