I bottoni stile Google (anche con jQuery)

Qualche giorno fa, Douglas Bowman (ai più noto come l'autore di StopDesign, ma ora anche impiegato di Google) ha dedicato un bellissimo intervento al processo di creazione con cui hanno preso forma i pulsanti che possiamo vedere in azione, tra l'altro, su GMail.

La sfida era quella di passare da una struttura basata su 9 celle di tabella per un singolo bottone ad una soluzione leggera, mantenibile, efficace e basata sui CSS, con una sola immagine, quella usata come sfondo. Il risultato in questa pagina dimostrativa. Studiate il codice e vedrete come con qualche regola CSS sia possibile dare quel particolare aspetto partendo da normali elementi a e button.

Ieri ho invece trovato il link alla soluzione per emulare quello stile di pulsanti, basata su un plugin per jQuery, presentata da Swizec Teller. Qui la demo con la scarna documentazione.

Certo, ci si potrebbe chiedere se è proprio necessario ricorrere a jQuery/Javascript dopo aver visto il lavoro di Bowman... Ma, come si dice, tutto per amor di completezza :).