Sfogliando la rete in modo abbastanza casuale, ho trovato un tutorial piuttosto interessante, ben strutturato, con un approccio graduale, che spiega come disegnare pulsanti, arrotondati e non, senza l'ausilio di immagini, ma con i CSS3.

Si parte con le semplici istruzioni HTML per la creazione di pulsanti, che già lasciano intravedere i futuri sviluppi, prevedendo tre classi chiamate grosso modo come i colori verde, blu e grigio. A questo punto, abbiamo vi è una pagina con tre collegamenti ipertestuali, alla quale vengono aggiunte poche righe CSS per stabilire la struttura generale dei pulsanti, e distinguere le tre classi corrispondenti ai colori.

Lo stile si può implementare attraverso un file separato oppure con le istruzioni nel tag della stessa pagina, soluzione più breve e magari più adatta per chi intende concludere l'esercitazione in breve tempo. La terza passata prevede di arricchire un po' la grafica dei pulsanti smussandone gli angoli, aggiungendo qualche ombra, e creando qualche effetto di animazione. In questa fase è obbligatorio precisare tramite opportuni prefissi istruzioni specifiche a seconda dei browser.

Seguono ulteriori modifiche ai gradienti di colore e una versione più grande dei pulsanti. A questo punto il lavoro è finito ed è possibile confrontare il risultato ottenuto con questa tecnica a casa propria, e quello previsto e pubblicato dagli autori di questo articolo. Naturalmente, la consultazione dei sorgenti, opportunamente scaricabili, potrebbe aiutare a comprendere ancora meglio i passaggi effettuati via via. Purtroppo non si possom l'autore richiede il tweet del tutorial è necessario effettuare un tweet, opzione che vedrei come ringraziamento più che ricatto (anche perché non tutti usano Twitter). Un escamotage è quello di copiare il codice un po' alla volta grazie ai pulsanti che si attivano passando il mouse nella zona in alto e alla destra dei frammenti di codice.