August 3
Tutti i pulsanti browser stile diverso, ma è possibile rendere il proprio stili personalizzati per rendere i pulsanti corrispondono ai suoi disegni sul web e sembrano grandi nella maggior parte dei browser. Avete bisogno di una combinazione di codice Cascading Style Sheet (CSS) HTML e per creare pulsanti personalizzati. Le opzioni sono quasi illimitate, e l'uso di CSS di livello 3 (CSS3) proprietà come "border-radius" e "box-shadow" rendono facile creare pulsanti arrotondati con un effetto tridimensionale.
1 Aprire il file HTML in un editor di codice o Blocco note. Scrivere il seguente codice per creare il pulsante:
<Tipo di pulsante = "button" class = "elegante"> pulsante Text </ button>
2 Aprire il file CSS esterno, o scrivere CSS tra "<style>" tag situati nella testa del tuo file HTML. Scrivere il codice per indirizzare qualsiasi pulsante con il nome della classe di "moda":
.Stylish {}
3 Impostare le proprietà sfondo e il bordo per il pulsante in CSS. I browser già pulsanti in stile con uno sfondo grigio e un bordo smussato, quindi è necessario sovrascrivere che lo stile. Questo codice imposta queste proprietà:
.Stylish {
background: # ff0000;
border: 1px solid # CC0000;
}
Il codice precedente crea un pulsante con uno sfondo rosso e un rosso più scuro, bordo a livello di un pixel.
4 Lo stile del tipo di carattere per il pulsante in questo modo:
.Stylish {
background: # ff0000;
border: 1px solid # CC0000;
font-family: Arial, sans-serif;
font-weight: bold;
font-style: italic;
colore: #FFFFFF;
}
Il codice di cui sopra imposta il testo pulsante per usare il font "Arial" in grassetto corsivo e utilizza il colore bianco.
5 Creare angoli arrotondati per il pulsante utilizzando la proprietà "border-radius", come segue:
.Stylish {
border-radius: 20px;
}
6 Lascia la tua tasto uno sfondo sfumato per far sembrare tridimensionale. Ecco il codice:
.Stylish {
background: # ff0000;
sfondo: linear-gradient (in alto, # ff0000, # 990000);
sfondo: -webkit-linear-gradient (in alto, # ff0000, # 990000);
}
È necessario utilizzare sia "linear-gradient" e "-webkit-linear-gradient" per far funzionare il gradiente in Chrome 11. Impostare un unico colore di sfondo prima per i browser che non supportano gradienti. È inoltre possibile creare un'immagine di gradiente e impostare lo sfondo in questo modo:
fondo: URL (path / to / gradient.png) # ff0000;
7 Mettere un ombra sul pulsante per dare più profondità. Ecco il codice:
.Stylish {
box-shadow: # 550000 2px 2px 10px;
}
Il codice esadecimale "# 550000" crea un colore rosso scuro per l'ombra. I prossimi due valori impostare l'offset dalla parte superiore e sinistra del pulsante. L'ultimo valore è il raggio di sfocatura che controlla la quantità di sfocatura che si desidera per l'ombra.