Prima di browser ha iniziato l'aggiunta di CSS3, o livello di fogli di stile CSS 3, supporto, creazione di un pulsante non predefinito richiesto aprendo un editor di grafica e progettazione pulsante come un'immagine utilizzando prima complicato codice. In CSS3, è possibile creare pulsanti con angoli arrotondati, sfumature e ombre senza qualsiasi immagini necessarie. Mentre questo metodo utilizza abbastanza poche righe di codice CSS, renderà ancora più se usaste immagini velocemente pagine Web.
Istruzioni
1
Aggiungere una coppia di tag "< button >" per il codice HTML per pagine Web e dare loro un nome di classe. Inserire il testo del pulsante tra di loro:
< classe button = "noimage" > My Button < / button >
2
Aprire il file di foglio di stile CSS della pagina Web. Se non hai ancora uno, salvare un file vuoto come "MyStyle" e Aggiungi questo codice dopo il tag "< title >" nella pagina Web:
< link rel = "stylesheet" href="mystyle.css" type = "text/css" / >
Salvare il file CSS nella stessa cartella come pagina Web o cambiamento "href" che corrisponda al percorso del file.
3
Creare una nuova regola di stile per classe del pulsante:
.NoImage () {
}
4
Il pulsante con un colore di sfondo e la nuova frontiera di stile:
.NoImage () {
colore di sfondo: #ff0061;
border: 1px solid #a70040;
raggio bordo: 10px;
}
Questo esempio crea un pulsante caldo-rosa con un single-pixel-ampio bordo più scuro. La proprietà "border-radius" curve di bordo; i maggiori valori in questa proprietà indicano più di arrotondamento.
5
Creare una sfumatura per il pulsante. Questo contribuisce a dare il pulsante un aspetto tridimensionale:
immagine di sfondo: lineare-gradient(top, #ff0061, #b90047);
immagine di sfondo: - webkit-lineare-gradient(top, #ff0061, #b90047);
immagine di sfondo: - moz-lineare-gradient(top, #ff0061, #b90047);
Avete bisogno di tre versioni del codice gradiente, tutti loro lo stesso codice, ma due con prefissi diversi browser. Il "-webkit" prefisso colpisce Chrome e Safari, mentre "-moz" influisce su Firefox. Questo esempio crea un gradiente di top-to-bottom base.
6
Aggiungere un'ombra dietro il pulsante utilizzando la proprietà di "box-shadow":
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
I primi due valori di offset all'ombra da sinistra e la parte superiore. Il terzo valore specifica la quantità di sfocatura ombra. Un codice di colore RGBa prende i valori di rossi, verdi e blu per i colori, oltre a un valore tra 0 e 1 per opacità. Nell'esempio viene illustrato nero con un'opacità del 20 per cento.
7
Stile del testo all'interno del pulsante. Modificare lo stile di colore, font e tipo di carattere. Aggiungere un'ombreggiatura al testo utilizzando "text-shadow":
colore: #ffffff;
font-style: Georgia, serif;
font-weight: bold;
ombreggiatura del testo: 1px 1px 3px rgba(0,0,0,0.2);
La proprietà "text-shadow" funziona nello stesso modo come "box-shadow."
8
Dare il tuo pulsante alcune imbottiture per dimensioni in relazione al testo:
padding: 10px 15px;
Il primo valore è la spaziatura orizzontale, mentre il secondo valore è verticale. Ecco il codice del pulsante finito:
.NoImage () {
colore di sfondo: #ff0061;
border: 1px solid #a70040;
raggio bordo: 10px;
immagine di sfondo: lineare-gradient(top, #ff0061, #b90047);
immagine di sfondo: - webkit-lineare-gradient(top, #ff0061, #b90047);
immagine di sfondo: - moz-lineare-gradient(top, #ff0061, #b90047);
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
colore: #ffffff;
font-style: Georgia, serif;
font-weight: bold;
ombreggiatura del testo: 1px 1px 3px rgba(0,0,0,0.2);
padding: 10px 15px;
}
Consigli & Avvertenze
- Aggiungere il nome della classe creata per il pulsante per qualsiasi altro pulsante che si desidera revisionare in questo stile privo di immagini.