CSS  »  Articoli  »  Effetti con CSS 

Abbiamo parlato di link-bottoni negli articoli Bottoni con rollover e Bottoni con rollover flessibili. In questo appuntamento ci occuperemo invece del più classico dei pulsanti: quello di submit. Attraverso due semplici esempi vedremo come sia possibile ottenere bottoni a tre stati, ovvero fase normale, :hover e :active (pulsante premuto). Cominciamo subito.

Un bottone semi-grafico a tre stati

Eccoci al primo esempio. Riporto qui uno screenshot del bottone nei tre stati su Opera:

Figura 1 - I tre stati del bottone

Cominciamo dal markup: si tratta di un semplicissimo pulsante di submit. Ecco l'HTML:

Qualora ci fosse la necessità di più di un bottone per pagina e con presentazione differente, si potrà attribuire a ciascuno un id univoco così da differenziarli.

Per ciò che riguarda la grafica dell'esempio, si è usata un'unica immagine di sfondo che combina i tre stati:

Figura 2 - L'immagine di sfondo usata nell'esempio

Si interverrà poi sulla posizione dello sfondo con la proprietà CSS background-position così da mostrare la porzione corrispondente allo stato del bottone.

Altri articoli

Altre guide

Altre newsletter