Buttons with gradients without images (Safari & Firefox)

[Stefano J. Attardi]

I saw from the wiki that Nicole is possibly about to start working on
an implementation of buttons in CSS:

http://wiki.github.com/stubbornella/oocss/buttons

One of the options she mentions is creating buttons without images,
using Bowman's technique or some custom filters to simulate gradients.

I don't like Bowman's technique (I think it's ugly), and CSS
gradients, as far as I know, are not available in Firefox and are not
part of any standard, so we cannot even hope they'll be widely
implemented any time soon.

For these reasons, I came up with an alterative technique, which
creates nice gradients using the CSS3 property box-shadow (already
implemented in Webkit and Gecko).

Enjoy:

http://attardi.org/buttons/

Fine print: only tested to work in Safari and Firefox. It fails in
Opera and, I assume, in IE. I'm using the <a> element because <button>
is much harder to tame. Despite these issues, I think the technique
has potential. I would be really happy if it made its way into OOCSS.

Looking forward to your feedback!

Cheers,

Stefano
http://attardi.org/

[MarcRic]

Hi Stefano,

I consider buttons will become a specific complexity level being added
to navBars in the future.

Have you already seen the examples here?

http://groups.google.com/group/object-oriented-css/browse_thread/thread/014f093c9e972b38?hl=en

About your sample, it is a very nice one, but CSS3?

I don't know the CSS3 project priority in W3C, and particularly prefer
solutions with current versions (as I know CSS 2.1 is RC until October
23).

It is not possible to do the same with current CSS specs?

Regards.

[Dan Humphrey]

Hi,

I'd say that It's perfectly acceptable to use CSS3 features now, as long as you aren't from the 'websites should look the same in all browsers' school.

In most cases I'm perfectly happy for users to miss out on gradients, shadows, rounded corners etc if their browsers do not support these features, as they do not miss out on any functionality or useability, only presentation.

I have 3 active projects on the go - all of which use border-radius (and similar vendor specifics) to achieve rounded corners - in IE everything is square and it makes no difference at all.

Just my 2 cents :)

[Nathan Anderson]

I heart modernizr

[Murray Nuttall]

I like the approach of inserting the <b class="top"><b class="tl"></b><b class="tr"></b></b> using jquery with the css3 underneath. This way you can switch it off, for certain browsers which support css3 or, when css3 is fully supported. It also degrades okay if javascript isn't available.