Bottone con CSS3

Oggi vi voglio postare uno dei tantissimi bottoni che possiamo utilizzare per i nostri scopi, magari cercate un bottone molto semplice che non sia una solita immagine per rendere più accattivante il pensiero di cliccarci sù (tecnica tradizionale), il bottone possiamo personalizzarlo e sotto spiegherò come fare.

Immagine bottone:




Ecco il codice:

#pulsante {
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
color: #fff;
padding: 10px 20px;
border: solid 1px #0076a3;
background: #0095cd;
}

Con outline: none rimuoviamo il contorno (tipicamente una linea tratteggiata) associato ai link e ai pulsanti quando sono attivi. Impostiamo il cursore perché assuma la tipica forma della manina (pointer) quando passiamo con il mouse sul bottone.

Centriamo il testo, rimuoviamo da esso qualunque tipo di decorazione, definiamo le proprietà di base per font e colore, aggiungiamo del padding e un sottile bordo, concludendo con la dichiarazione con cui settiamo il colore di sfondo.