Come creare pulsanti interattivi rollover con i CSS

May 16

I siti web moderni richiedono interattività con l'utente il più possibile, e l'aggiunta di stati rollover per i pulsanti di navigazione è uno dei modi più semplici per farlo. Non è necessario spendere soldi per Dreamweaver o Fireworks; è possibile creare rollover interattivi con HTML e CSS.

istruzione

1 Prova la tua pagina Web per assicurarsi che i link HTML di base funzionano correttamente. Rollover sui collegamenti interrotti non migliorerà il vostro sito. Se i collegamenti funzionano, aprire il file HTM pagina Web in qualsiasi editor di testo.

2 Aggiungere una dichiarazione foglio di stile. Posizionare il cursore all'interno dei tag e del tipo <head>:
<P>
<Style type = "text / css">
</ Style>
</ P>

3 Posizionare il cursore tra i nuovi tag <style>. Aggiungere un ritorno a capo e dichiarare il vostro (pulsante) stile di ancoraggio: "a {}" (ritorni a capo aiuterà a seguire il codice, ma non influiscono sul browser).

4 Inserisci il tuo dichiarazione di stile tra le parentesi graffe ({}). È necessario includere "display: block; larghezza: 5em (o qualsiasi altro larghezza in" spaziatura em "); background-color: # 000000 (o qualsiasi altro valore, ad esempio, # 85DE59); color: #aaaaaa (o qualsiasi altro valore ); text-align: center; " nella dichiarazione. Quando si visualizza in anteprima la pagina nel browser, il vostro link sarà apparire come pulsanti rettangolari.

5 Definire il valore di rollover nella sezione stili CSS: "a: hover {}"; nella definizione di stile, aggiungere valori diversi per "background-color" e "colore".

6 Testare l'immagine nel tuo browser per assicurarsi che i collegamenti cambiano colore quando il mouse si trova sopra i pulsanti. Se le modifiche un collegamento, lo faranno tutti i cambiamenti.

Consigli e avvertenze

  • È inoltre possibile aggiungere i valori CSS per l'altezza della linea, padding, bordo, altre proprietà CSS text-decoration e per migliorare l'aspetto dei pulsanti.
  • È possibile utilizzare i CSS per scambiare immagini per rollover digitando "background: # 000000 url (percorso di immagine e nome) no-repeat left-top;" in luogo della definizione background-color in l'ancora ( "A") le definizioni di stile. Utilizzare la stessa dichiarazione, ma con il nome dell'immagine di rollover nella a: hover definizioni.

Articoli Correlati