I pulsanti sulle tue pagine web, quando sinistra unstyled, rischiano di apparire diversa in ogni browser. È possibile migliorare il tuo Web design utilizzando codice di (CSS) del foglio di stile CSS per abbinare pulsanti al resto del tuo sito. I due creazione di pulsante Tag... < button > e < input >..--può prendere qualsiasi proprietà CSS si utilizzerebbe il maggior parte altri elementi HTML, ad esempio paragrafi e caselle < div >. Trucchi più avanzati in CSS Level 3 (CSS3), quali sfondi sfumati e ombreggiature, consentono di creare pulsanti senza dover aprire un programma di editing grafico.

Istruzioni

1

Scrivere il codice HTML per creare un pulsante visualizzato sulla tua pagina Web. È possibile utilizzare il tag < button > o il tag < input >, ma il tag < input > è meglio se stai aggiungendo pulsanti al form. L'etichetta del pulsante è simile al seguente:

< button > pulsante testo < / button >

Inserire il testo da visualizzare sul pulsante tra i tag < button >. Questo è diverso da quello il tag < input >, che richiede di impostare l'attributo < tipo > a "submit" e l'attributo "value" per il testo che si desidera sul pulsante. Ecco un esempio di < input >:

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

2

Aprire il foglio di stile per il tuo sito nell'editor di codice. Aggiungere tag < style > e scrivere codice CSS tra di loro se non hanno un foglio di stile o sapere come crearne uno. Scrivere un selettore CSS per "selezionare" pulsante < > o < input > tag in questo modo:

tasto {}

Scrivere un selettore "attributo" < input > anziché selezionando il tag < input > stessa, perché il modulo includerà il tag < input > per campi di testo pure. Qui è il selettore "attributo":

input [type = "submit"] {}

3

Utilizzare codice CSS per lo stile del pulsante come ti piace. Impostare lo sfondo su un nuovo colore, immagine o anche una sfumatura. Rimuovere il bordo predefinito e modificarlo a qualcosa che si preferisce, ad esempio un bordo arrotondato, utilizzando "border-radius." Impostare la proprietà di "box-shadow" per aggiungere un'ombreggiatura. Ecco un esempio:

Button {

Priorità bassa: #ff0000;

colore: #ffffff;

border: 0px;

raggio bordo: 10px;

}

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

Consigli & Avvertenze

• Applicare un'ombreggiatura al pulsante, quindi utilizzare il ": attiva" pseudo-classe per rimuovere l'ombreggiatura quando l'utente fa clic sul pulsante.
• Applicare uno sfondo sfumato in CSS e quindi utilizzare il ": hover" pseudo-classe per applicare una sfumatura inversa quando qualcuno passa sopra il pulsante. Questo crea una chiazza di petrolio effetto di evidenziazione.
• Versioni di Internet Explorer 8 e sotto mancanza di supporto per la maggior parte delle tecniche CSS3, e Internet Explorer 9 è limitata a suo sostegno. Utilizzare fallback JavaScript, fogli di stile supplementare e immagini per rendere i pulsanti compatibile su molti browser differenti.