Realizzare bottoni di submit in stile Web2.0

Oggi vi vorrei parlare di un bel articolo scritto su “Particletree” che parla di come abbelire i soliti e bruttissimi bottoni di submit che vengono visualizzati all’interno dei nostri browser, quando abbiamo un form dati da inviare.

Il sito mette a disposizione un bel codice HTML e CSS che ci permette di realizzare 3 pulsanti “Save” “Change Password” “Cancel” in stile Web2.0. Particletree ci fa visualizzare prima tutti i possibili pulsanti realizzabili tramite il solito codice HTML “<input type=”submit” value=”Submit” />” che viene inserito per realizzare un form dati e poi ci spiega come abbelire i pulsanti con i suo nuovo e intuitivo codice CSS.

Questo codice CSS ci permette di inserire una piccola immagine, di default icone famfamfam Silk, prima delle varie scritte che ci permettono di visualizzare il bottone. La bellezza di questi bottoni sono i colori di hover quindi quando viene passato il mouse sopra di essi; infatti vengono utilizzati colori molto belli e sempre in stile Web2.0.

Questo è un’esempio di bottoni di form dati di deafult:

Questi invece sono i pulsanti che potremmo avere, adottando il CSS:

Quindi come potrete vedere l’enorme differenza di bellezza e chiarezza dei nuovi tipi di pulsanti. Se vogliamo colpire i nostri utenti con dei form molto belli e accattivanti questo piccolo script HTML & CSS non deve mancare all’interno del nostro sito o blog. Il codice HTML & CSS da inserire per realizzare questi splenditi pulsanti sono veramente molto semplici da capire e da inserire all’interno delle nostre applicazioni Web.

Per visualizzare la guida con i codici CSS visualizzate questo link: http://particletree.com/features/rediscovering-the-button-element/