I pulsanti sulle tue pagine web, quando viene lasciato senza stile, rischiano di apparire diversi in tutti i browser. È possibile migliorare i vostri disegni Web utilizzando fogli di stile CSS codice (CSS) per abbinare i pulsanti per il resto del tuo sito. Il pulsante di creazione di due tag - <button> e <input> - possono prendere qualsiasi proprietà CSS si usa sulla maggior parte degli altri elementi HTML, come i paragrafi e <div> scatole. trucchi più avanzati in CSS Livello 3 (CSS3), come sfondi sfumati e ombre, consentono di creare pulsanti senza aprire un programma di grafica.

istruzione

1 Scrivere il codice HTML per far apparire un pulsante nella pagina Web. È possibile utilizzare il tag <button> o il tag <input>, ma il tag <input> è meglio se si sta aggiungendo pulsanti per le forme. Il tag tasto appare così:

<Button> Testo pulsante </ button>

Mettere il testo che si desidera visualizzare sul pulsante tra i tag <button>. Questo è diverso dal tag <input>, che richiede di impostare il <tipo> attributo di "inviare" e il "valore" attributo al testo che si desidera sul pulsante. Ecco un <input> Esempio:

<Input type = "submit" value = "Clicca qui!" />

2 Aprire il foglio di stile per il tuo sito con un editor di codice. Aggiungere <style> tag e scrivere il codice CSS tra loro se non si dispone di un foglio di stile o sapere come crearne uno. Scrivi un selettore di CSS per il <tasto> o <input> tag "selezionare" in questo modo:

Pulsante {}

Scrivi un selettore di "attributo" per <input> invece di selezionare il tag <input> in sé, perché il modulo includerà <input> tag per i campi di testo pure. Ecco il selettore "attributo":

Ingresso [type = "submit"] {}

3 Usa il codice CSS per lo stile del tasto come ti piace. Impostare lo sfondo di un nuovo colore, immagine o persino una sfumatura. Rimuovere il bordo predefinito e cambiare in qualcosa si preferisce, come ad esempio un bordo arrotondato, l'utilizzo di "border-radius." Impostare la proprietà "box-shadow" per aggiungere un ombra. Ecco un esempio:

pulsante {

background: # ff0000;

colore: #FFFFFF;

border: 0px;

border-radius: 10px;

}

Il codice precedente crea un pulsante rosso con testo bianco, nessun bordo e angoli arrotondati.

Consigli e avvertenze

• Applicare un'ombra esterna al pulsante, quindi utilizzare il ": attiva" pseudo-classe per rimuovere l'ombra quando l'utente fa clic sul pulsante.
• Applicare uno sfondo sfumato in CSS e quindi utilizzare il ": hover" pseudo-classe per applicare un gradiente inverso quando qualcuno si libra sopra il pulsante. Questo crea un effetto di evidenziazione liscia.
• le versioni di Internet Explorer 8 e sotto il supporto mancanza per la maggior parte delle tecniche CSS3, e Internet Explorer 9 è limitato nel suo sostegno. Utilizzare JavaScript ripiego, fogli di stile extra e immagini per rendere i pulsanti compatibili con tutti molti browser differenti.