Pulsanti di ingresso dal design artistico possono aggiungere novità al tuo sito Web e impostare lo distingue il pubblico virtuale. Pulsanti HTML ordinari utilizzano tipi di carattere, bordi e colori di sistema standard. A meno che gli sviluppatori di applicano gli stili ai quei pulsanti, pulsanti tutti avranno lo stesso aspetto. Utilizzando le classi Cascading Style Sheets (CSS), potete stile pulsanti di ingresso in minuti e personalizzare il proprio look per soddisfare le vostre esigenze.

Istruzioni

1

Avviare Blocco note o un Editor HTML.

2

Aprire un documento HTML o crearne uno nuovo. Aggiungere i seguenti pulsanti di ingresso alla sezione "corpo" del documento:

< id di input = "Button1" class = "buttonStyle1" type = "button" valore = "Tasto 1" / >

< id di input = "Button2" class = "buttonStyle2" type = "button" value = "Pulsante 2" / >

Ogni pulsante fa riferimento a una classe CSS differente.

3

Individuare la sezione "head" del documento e incollare questo codice in quella sezione:

< style type = "text/css" >

.buttonStyle1 {border-style: inset; border-color: red;

colore: nero; background-color: Aqua; tipo di carattere-peso: normale;

cursore: predefinito;

}

Questa classe CSS, "buttonStyle1," definisce l'aspetto del primo pulsante. È possibile utilizzare qualsiasi proprietà CSS che ti piace nella classe. In questo esempio, la classe imposta il pulsante stile di bordo di "inserire" e colori il testo nero. Inoltre dà il pulsante un aqua sfondo e imposta lo spessore del carattere normale. Valore di "default" di proprietà cursor consente al browser di visualizzare il cursore predefinito quando si sposta il mouse sopra il pulsante.

4

Aggiungere il seguente codice sotto il codice illustrato nel passaggio precedente:

.buttonStyle2 {border-style: inizio; border-color: Blue; font-dimensioni: 1.5em;

colore: giallo; background-color: Black; font-weight: bold;

cursore: puntatore;

Questo definisce le proprietà per il secondo pulsante. Crea un bordo con uno stile di "inizio". Questo stile dà il pulsante un lieve aspetto 3D. Questa classe inoltre imposta la dimensione del carattere del pulsante su 1.5em e definisce diversi colori per il primo piano e sfondo. Lo spessore del carattere è in "grassetto", e il cursore valore della proprietà "puntatore" converte il cursore in un puntatore quando passi il mouse sopra il pulsante.

5

Salvare il documento e aprirlo nel browser. I due pulsanti visualizzano le proprietà fisiche definite nel CSS. Muovi il mouse sopra i pulsanti per vedere come le modifiche di cursore per le forme che si imposta nelle classi CSS corrispondente.

Consigli & Avvertenze

• CSS è molte più proprietà che è possibile assegnare alle classi. Per esempio, è possibile impostare di un pulsante di input spaziatura, allineamento del testo e famiglia di caratteri utilizzando queste proprietà. Sperimentare con diversi valori di proprietà CSS per determinare quelli che funzionano meglio con il contenuto della pagina Web.