Fancy Buttons - Customize Buttons Effortlessly with CSS3 & Compass [video]

http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-here/

by chriseppstein • 17 years ago

88 29 17 years ago

ltackett• 17 years ago

pimpy.

This plugin is such a great example of how to use compass and sass to build simple abstractions out of some of the most complex css that exists.

jp_sc• 17 years ago

A few CSS3 rules on a single element isn't something I would call "the most complex css that exists".

EDIT: I do like compass and this plugin.

tptacek4• 17 years ago

It's CSS3 that degrades beautifully in IE and controlled by 2-3 lines of styling. What more do you want?

lessallan• 17 years ago

Compass FTW!

fnid• 17 years ago

which browsers support this?

tptacek4• 17 years ago

They all do, but things will look better in Firefox and Safari.

tptacek4• 17 years ago

We do something similar, but vastly more evil, with Compass on our product. We need the visual experience to be solid on IE (our customer base is enterprise). So... we generate and cache PNG's with ImageMagick using hooks we wrote into Sass. For instance, we can specify arbitrary gradients using Sass color variables and direction/distance arguments, auto-gen rounded corners, and in some cases render text using non-browser-safe type.

I wouldn't recommend the approach (I think it's going to be incredibly clunky in a year or so, and that things like Fancy Buttons that use Compass to hide the complexity of optimal degrading CSS are the way to go), but it is an example of how flexible Compass and Sass are: you can abuse them terribly, and they'll stay loyal.

imathis6• 17 years ago

Fascinating, thanks for sharing your experience. Pixel perfection certainly is a tempting goal, but I've spent too much time and other people's money trying to preserve the illusion that IE is anything less than garbage. I've had enough. Now I'm more focused on usability and I find it far more rewarding.

snprbob86• 17 years ago

Yeah, this is a point that many people neglect. It just needs to work in IE. It doesn't need to be pretty. And if you have enough customers on IE that it needs to be pretty, it doesn't need to match the real pretty exactly.

audionerd• 17 years ago

What does it look like in IE6? Just curious, if anyone has a screenshot.

imathis6• 17 years ago

IE6 doesn't easily support png transparency. It basically just looks like a flat colored boxy button with a border.

chriseppstein4• 17 years ago

I'd imagine that some future revision might enhance the support for IE6...

bprater• 17 years ago

Are there any pure JS implementations of something like Sass/Compass?

chriseppstein4• 17 years ago

There's http://github.com/clr/sassijs

But it's not feature complete yet.

newsio• 17 years ago

Excellent little demo.

Shows how long I've been out of touch with CSS. Didn't know stuff like variables or rounded edges was supported.

pohl• 17 years ago

The variables appear to be a SASS construct, not CSS.

http://en.wikipedia.org/wiki/Sass_(stylesheet_language)

imathis6• 17 years ago

SASS compiles to CSS.

ned• 17 years ago

Rounded corners are supported in Webkit Gecko and Presto, and not in Trident of course.

Variables are provided by SASS, a CSS pre-processor language/framework.

kyro2• 17 years ago

handles

kyro2• 17 years ago

Yeah, I was just helping him correct a misspelling in the post, that still hasn't been caught.

"Here’s a sample of what CSS rules this mixin hanldes for you:"

imathis6• 17 years ago

Finally caught it. Thanks.

treyp• 17 years ago

It should be noted that CSS gradients are not yet supported in Firefox (3.5). As such, this demo uses transparent PNGs instead of of CSS3 properties. It works fine in this case, but of course images aren't as flexible as CSS properties would be.

However, Firefox 3.6, which should be released within a few weeks, will support custom gradients, so things are looking up.

Fancy Buttons - Customize Buttons Effortlessly with CSS3 & Compass [video]

Related Stories