Personalizzare i pulsanti dei moduli con i CSS

I pulsanti vengono utilizzati per inviare i moduli, detti anche form, e sono presenti un po dappertutto nei siti web, basta pensare ai moduli di contatto, alle ricerche, ecc… Ecco quindi un esempio pratico di come è possibile creare puslanti personalizzati con l’aiuto dei CSS:

Questo esempio consente di personalizzare un pulsante andando ad analizzare un po’ tutte le proprietà che si possono modificare in questi casi.

Clicca qui per vedere un esempio

Ecco il codice CSS:

.test
{
background-color: #693; /* colore di sfondo */
background: #693url('../pulsante.png') repeat-x center; /* immagine di sfondo */
border: 0; /* bordo dell'elemento */  
color: #FFF; /* colore del testo */ 
font-weight: bold;  /* testo in grassetto */ 
padding: 6px 20px; /* spazio interno */ 
height: 40px; /* altezza */  
width: auto; /* larghezza  */
}

.test:hover
{
background-color: #090; /* sfondo quando c'è il mouse */
}

Si possono inoltre aggiungere altri effetti come i bordi arrotondati, le ombre,..

Praticamente allo stesso modo si possono modificare anche i campi e gli altri elementi presenti nei moduli.

Compatibilità:

browser_ie browser_firefox browser_chrome browser_opera browser_safari

Hai delle idee o dei suggerimenti per migliorare questo articolo? Lascia un commento qui sotto!

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website