Soma Design

UPDATE: I pub­lished Real­is­tic CSS3 But­tons Redux to make even bet­ter buttons.

A while back Mike Run­dle post­ed the ter­rif­ic arti­cle Craft­ing Sub­tle & Real­is­tic User Inter­faces. He clear­ly artic­u­lates design details which make but­tons look real­is­tic and there­fore push-able. If you haven’t read it, go there, spend lots of time look­ing at his excel­lent dia­grams, and then come back. Go even if you for­get to come back.

Then Jay on the Infer­ence blog shared his CSS3 imple­men­ta­tion of Rundle’s but­tons to great effect. He also explic­it­ly shows the design details (with excel­lent dia­grams) that make for press-able but­tons. But, sad­ly, there was very lit­tle “3” in the CSS3, only mak­ing use of bor­der-radius and rgba col­ors. Also, he resort­ed to 3 lay­ers of nest­ed <b> ele­ments inside the <a> ele­ments to imple­ment his effect. I knew that this could be done with lean­er markup, more CSS3 good­ies, zero images, and way more flex­i­bil­i­ty. (Note: this isn’t a cri­tique of Jay’s good work — just an instance where some­one inspires you to try to do bet­ter.)

The end result uses markup that looks like this:

<a href="#" class="button">Pushit</a>

And looks like this:

States: Nor­mal, Hover/Focus, Active (left to right)

Well, it looks that way in Fire­fox (3.6+), Safari & Chrome. I haven’t even test­ed in IE and don’t care to. I’m sure that it’d be pos­si­ble to do this in with prop­er pro­gres­sive enhance­ment, but this was about test­ing the bound­aries of CSS3.

I’m not going to break down the code here. That’s what Firebug/Inspector/View Source are for. But here are some notes:

• The biggest weak­ness by far is that I need­ed to set an explic­it width on the but­tons. (Fixed) I could­n’t find a way around this and main­tain my no-extra-markup chal­lenge. Con­sis­tent widths might actu­al­ly be an advan­tage in cer­tain con­texts. (There are some class­es to pro­vide for dif­fer­ent widths.)
• CSS3 gra­di­ents galore. Not an image in sight.
• The extra bor­ders are cre­at­ed using :after and :before pseudo-elements.
• The CSS3 gra­di­ents use rgba col­or nota­tion with alpha val­ues so that you can have dif­fer­ent coloured but­tons by chang­ing only the back­ground-col­or. (I assigned a few colour exam­ples to extra classes)
• Real <input type="submit" /> but­tons don’t allow :after and :before pseu­do-ele­ments. Form ele­ments are weird.
• CSS gra­di­ents are cur­rent­ly avoid­ed by ‑webkit/-moz-tran­si­tion. Brief googling indi­cat­ed per­for­mance con­cerns. If you want­ed the ooh shiny™, you could change the background-color on the :hover/:active states instead. I avoid­ed this because I only want­ed to have to declare a sin­gle background-color for col­or class­es, but tried it in the obvi­ous­ly-labeled button.

Tired of read­ing? Look at some real­is­tic look­ing CSS3(-only) but­tons. And if any­one has any ideas about how to over­come the fixed-width require­ment, do share!