July 3
L'aggiunta di effetti alle pulsanti sito può assumere un disegno altrimenti statico e renderlo più dinamico e user-friendly. Tradizionalmente, web designer immagini o Adobe Flash Professional usati per creare bottoni con effetti. Ma è possibile ottenere un effetto dinamico con niente di più di un paio di righe di CSS e il codice HTML.
1 Aprire una nuova finestra nel vostro editor di testo.
2 Definire una classe così come caratteristiche di stile per i pulsanti del sito web. Ad esempio, il codice seguente crea la classe "navigationBar", che viene visualizzato come un blocco con un colore di sfondo bianco:
.navigationBar {display: block; background-color: #FFFFFF; }
3 Aggiungere l'effetto "hover" al tuo pulsante. Il seguente codice farà il colore di un pulsante di sfondo nella "navigationBar" grigia classe quando passaggio del mouse su di esso:
.navigationBar: hover {display: block; background-color: # 999999; }
4 Salvare il file di testo con estensione css. Ad esempio, è possibile assegnare un nome al file "tasto-effects.css".
5 Apri la tua pagina web HTML in un editor di testo.
6 Collega il tuo file CSS con la tua pagina web HTML. Per esempio, se avete chiamato il vostro file CSS "tasto-effects.css", inserire il seguente codice nella sezione <head> della tua pagina web:
<Link rel = "stylesheet" type = "text / css" href = "button-effects.css">
7 Creare un pulsante sito web che corrisponde alla classe nel codice CSS. Ad esempio, se il codice CSS include la classe "navigationBar", il codice seguente, inserito nella sezione <body> della tua pagina web, creerà un pulsante in quella classe:
<Div class = "navigationBar"> Chi siamo </ div>
8 Salvare il file HTML, e aggiornare in un browser per vedere i risultati.