Tutti i browser stile pulsanti in modo diverso, ma si possono fare stili personalizzati per rendere il vostro pulsanti corrispondono i vostri progetti Web e guardare grande attraverso la maggior parte dei browser. Avete bisogno di una combinazione di codice HTML e fogli di stile CSS (Cascading Style Sheet) per creare pulsanti personalizzati. Opzioni sono quasi illimitate, e l'uso dei CSS di livello 3 (CSS3) strutture come "border-radius" e "box-shadow" lo rendono facile creare bottoni tondi con un effetto tridimensionale.
Istruzioni
1
Aprire il file HTML in un editor di codice o Microsoft Notepad. Scrivere il codice seguente per creare il tuo pulsante:
< pulsante di tipo = "button" class = "elegante" > testo pulsante < / button >
2
Aprire il tuo file CSS esterno o scrivere CSS tra i tag di "stile < >" si trova nella sezione head del file HTML. Scrivere questo codice per qualsiasi pulsante con il nome di "elegante" classe di destinazione:
.stylish {}
3
Impostare le proprietà di sfondo e il bordo del pulsante nel CSS. I browser già stile pulsanti con sfondo grigio e un bordo in rilievo, così è necessario sovrascrivere quello stile. Questo codice imposta tali proprietà:
.stylish () {
Priorità bassa: #ff0000;
border: 1px solid #cc0000;
}
Il codice precedente crea un pulsante con un fondo rosso luminoso e un rosso scuro, un pixel-ampio bordo.
4
Il carattere per il pulsante Mi piace di questo stile:
.stylish () {
Priorità bassa: #ff0000;
border: 1px solid #cc0000;
font-family: Arial, sans-serif;
font-weight: bold;
font-style: italic;
colore: #ffffff;
}
Il codice sopra imposta il testo del pulsante per utilizzare il font "Arial" in grassetto e corsivo e utilizza il colore bianco.
5
Creare angoli arrotondati per il pulsante utilizzando la proprietà "border-radius", come segue:
.stylish () {
raggio bordo: 20px;
}
6
Dare il tuo pulsante uno sfondo sfumato per far sembrare tridimensionale. Ecco il codice:
.stylish () {
Priorità bassa: #ff0000;
Priorità bassa: lineare-gradient(top, #ff0000, #990000);
Priorità bassa: - webkit-lineare-gradient(top, #ff0000, #990000);
}
È necessario utilizzare entrambi sfumatura"lineare" e "- webkit - lineare-gradiente" per far funzionare il gradiente in Chrome 11. Impostare uno sfondo monocolore in primo luogo per i browser che non supportano le sfumature. È anche possibile creare una gradiente immagine e impostare lo sfondo come questo:
Priorità bassa: URL(path/to/gradient.png) #ff0000;
7
Mettere un'ombra sul vostro tasto 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 controlli sfocatura quanto si desidera per l'ombra.
Consigli & Avvertenze
- Proprietà come "border-radius" e "box-shadow," insieme con i gradienti lineari, non funzionano nei browser meno recenti. È consigliabile consentire il tuo Web design a degradare con grazia in questi browser, così che un visitatore utilizzando Internet Explorer 8 verrà visualizzato un pulsante tinta con angoli non arrotondati.