Con la versione dei CSS3 ancora in fase di definizione dal W3C, alcuni designer hanno creato dei fogli di stile da applicare a dei semplici collegamenti ipertestuali, per creare dei pulsanti graficamente accattivanti.

Infatti assegnando una semplice classe a un elemento, è possibile assegnare loro uno stile grafico, senza utilizzare nessun tipo di programma esterno come Photoshop.

Vediamo alcune raccolte e come usare questi fogli di stile CSS3 per pulsanti.

CSS3 Animated Bubble Buttons

Braincode

We Love Buttons

Zardi Button CSS3

Classic buttons

Fancy Buttons

GitHub-Style CSS3 Buttons

Bon Bon

CSS3 Gradient Buttons

Buttons with CSS3 and RGBA

Come si Usano?

Utilizzare questi fogli di stile per i nostri pulsanti è davvero semplice.

Basta caricare il foglio di stile .CSS che troveremo nella nostra pagina tra i tag <head> </head>come in questo modo:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Infine aggiungere la classe al nostro collegamento o testo.

<a href="#" class="classe_pulsante">Mio Pulsante</a>

Avvertenze

Ricordiamoci che questi fogli di stile adoperano nuovi moduli di CSS3 ancora non supportato al 100% da tutti i browser.

Prima di decidere di usare uno stile CSS3 per i nostri pulsanti facciamo un’analisi di dove verrà visualizzato il nostro progetto web.

Vi ricordo che ci sono svariate tecniche per adoperare i moduli CSS3 anche su altri browser come CSS3pie.

Hai realizzato dei Fogli di Stile CSS3 per pulsanti?

Segnalalo nei commenti e verrà aggiunta alla raccolta.

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

7 Commenti

  1. Ottime raccolte! Messe tra i preferiti!

    Come dici tu bisogna solo fare attenzione a non abusarne…

Commenti