home
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:
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.
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;
}
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.
Home
