Esempio di pulsante con rollover 1 in CSS

Rollover 1 CSS
Per questo esempio dobbiamo avere 3 immagini che funzioneranno come;
Riposo

Su

Premuto

Poi nel corpo del nostro sito abbiamo questo
Codice:


INIZIO

E così per tutti i nostri pulsanti, dopo che dovremo usare i CSS, iniziamo con questo codice:
Codice:

# bot1 {
bordo: 0 0 0 0;
imbottitura: 0;
allineamento del testo: centro;
}
Dove diciamo che non vogliamo margine esterno e interno, allineiamo il testo al centro, ora continuiamo con questo codice:
Codice:

da # bot1 a {
immagine di sfondo: url (bg_menu_1.jpg);
posizione sullo sfondo: centro in alto;
altezza: 30px;
larghezza: 100px;
blocco di visualizzazione;
colore: # 990000;
decorazione del testo: nessuna;
imbottitura: 5px;
background-repeat: no-repeat;
font-weight: grassetto;
}
Che è praticamente lui che fa tutto, vediamo riga per riga
immagine di sfondo: url (bg_menu_1.jpg);
Con questo diciamo che vogliamo un'immagine di sfondo e diamo il percorso di questo
posizione sullo sfondo: centro in alto;
Con questo indichiamo che la posizione dell'immagine di sfondo sarà centrata e verso l'alto.

background-repeat: no-repeat;
In modo che lo sfondo non si ripeta come se fosse un motivo.
altezza: 30px;
larghezza: 100;
Gli diciamo che l'altezza sarà 30 e la larghezza 100px che sono le dimensioni delle nostre immagini di sfondo.
blocco di visualizzazione;
In modo che generi e rispetti una scatola con le misure che abbiamo messo prima.
colore: # 990000
Con questo diamo solo un colore al testo che si trova all'interno della nostra scatola.
decorazione del testo: nessuna;
È per evitare la riga che si trova sotto i collegamenti.
imbottitura: 5px;
In modo che io risparmi uno spazio di 5px nella parte superiore del nostro collegamento e con questo abbassi la posizione al centro del nostro riquadro.
font-weight: grassetto;
Rende le lettere in grassetto
Quindi devi solo aggiungere classi per gli pseudo elementi "hover" e "focus"
Codice:

# bot1 a: hover {
immagine di sfondo: url (bg_menu_2.jpg);
}
# bot1 a: focus {
immagine di sfondo: url (bg_menu_3.jpg);
}
Ma come ci rendiamo conto, abbiamo solo cambiato il percorso delle nostre immagini di sfondo per ottenere l'effetto che stavamo cercando.
Il codice del nostro esempio di rollover in css mostrato di seguito:
Codice:








INIZIO


E le immagini possono essere scaricate da questa pagina, facendo clic destro sull'immagine e salvando come.