Corsi on-line

Abbelliamo l’orrendo pulsante di submit (e reset)

Con un po’ di css ed una semplice immagine si può rendere gradevole il brutto pulsante di submit standard presente nei moduli HTML; è possibile, inoltre, fare in modo che detto pulsante assuma un aspetto diverso a seconda del suo stato: a riposo, quando ci si passa sopra col mouse e quando viene premuto.

Creiamo per prima l’immagine: tale immagine conterrà i vari stati del  pulsante, dovrà avere una larghezza uguale a quella che definiremo per il pulsante e un’altezza doppia (o tripla) in funzione del numero di stati che vogliamo customizzare.

In questo articolo ho impostato le dimensioni del bottone a 120 x 40 pxl e, volendo evidenziare solo due stati, ho creato un immagine di 120 x 80 pxl (più precisi si è nel calcolo dei pixel e migliore è la resa del pulsate). Ecco l’immagine:

Creiamo ora il foglio di stile CSS:

/* tutto quello che viene prima*/
button{/*pulsante inattivo*/
 width: 120px;/*larghezza del pulsante = a quella dell'immagine*/
 height: 40px;/*altezza del pulsante; metà o un terzo di quella dell'immagine*/
 border: 0;/*metto il bordo a zero*/
 cursor: pointer;/*definisco l'aspetto del cursore*/
 text-align: center;/*centro il testo che scriverò nel pulsante*/
 font-size: 18px;
 font-weight: bold;
 color: #FFFFFF;
 background-color: #999999;/*assegno comunque un colore di sfondo*/
 /*imposto un'immagine come sfondo e la posiziono*/
 background-image: url(pulsante.jpg);/*attenzione ai percorsi*/
 background-position: 0 0;/*posizione immagine alle coordinate 0 0*/
 background-repeat: no-repeat;/*l'immagine non deve ripetersi*/
}
button:hover{/*quando il mouse è sopra*/
 /*lascio inalterata la posizione in quanto pulsante a due stadi
 se l'immagine è predisposta a tre stati
 metterò background-position: 0 -40px;*/
 background-position: 0 0px;
 color: #FFFF00;/*cambio il colore del testo*/
}
button:active{/*pulsante premuto*/
 /*faccio salire l'immagine di 40px, quindi a monitor
 sarà visualizzata la parte a pulsante premuto
 se l'immagine è predisposta a tre stati
 la alzerò di 80px scrivendo background-position: 0 -80px;*/
 background-position: 0 -40px;
 color: #00FF00;
}
/* tutto quello che viene dopo*/

Per completezza posto anche l’HTML del mio modulo:

<form name=”mio_form” action=”dove_voglio.php” method=”post”>
  <!–- tutti i campi che mi servono -–>
  <button type=”reset”>Pulisci</button>
  <button type=”submit” name=”submit”>Invia</button>
</form>

Et voilà, il gioco è fatto.

Nota: per abbellire anche il resto del form consiglio di leggere l’interessante aricolo dedicato alla personalizzazione grafica di select, radio e checkboxes.

Post correlati
I più letti del mese
Tematiche