Przykład przycisku z najazdem 1 w CSS

Po najechaniu 1 CSS
W tym przykładzie musimy mieć 3 obrazy, które będą działać jako;
Odpoczynek

Na

Przytrzymany

Następnie w treści naszej strony mamy to
Kod:


POCZĄTEK

I tak dla wszystkich naszych przycisków, po tym, jak będziemy musieli użyć CSS, zaczynamy od tego kodu:
Kod:

# bot1 {
granica: 0 0 0 0;
wypełnienie: 0;
wyrównanie tekstu: środek;
}
Tam, gdzie mówimy, że nie chcemy marginesu zewnętrznego i wewnętrznego, wyrównujemy tekst do środka, teraz kontynuujemy ten kod:
Kod:

# bot1 do {
obraz w tle: url (bg_menu_1.jpg);
pozycja tła: środek górny;
wysokość: 30px;
szerokość: 100px;
Blok wyświetlacza;
kolor: # 990000;
dekoracja tekstu: brak;
padding-top: 5px;
powtarzanie w tle: bez powtórzeń;
grubość czcionki: pogrubiona;
}
Że jest praktycznie tym, który robi wszystko, zobaczmy linia po linii
obraz w tle: url (bg_menu_1.jpg);
W ten sposób mówimy, że chcemy mieć obraz tła i podajemy ścieżkę tego
pozycja tła: środek górny;
W ten sposób wskazujemy, że położenie obrazu tła będzie wyśrodkowane i skierowane do góry.

powtarzanie w tle: bez powtórzeń;
Aby tło nie powtarzało się tak, jakby było wzorem.
wysokość: 30px;
szerokość: 100;
Mówimy mu, że wysokość będzie wynosić 30 pikseli, a szerokość 100 pikseli, które są wymiarami naszych obrazów tła.
Blok wyświetlacza;
Aby generował i respektował pudełko ze środkami, które włożyliśmy wcześniej.
kolor: # 990000
Dzięki temu nadajemy kolor tylko tekstowi, który znajduje się w naszym pudełku.
dekoracja tekstu: brak;
Ma to na celu uniknięcie linii znajdującej się pod linkami.
padding-top: 5px;
Aby zaoszczędzić miejsce 5px w górnej części naszego linku i tym samym obniżyć pozycję do środka naszego pudełka.
grubość czcionki: pogrubiona;
Sprawia, że ​​litery są pogrubione
Następnie wystarczy dodać klasy dla pseudoelementów "hover" i "focus"
Kod:

# bot1 a: najedź {
obraz w tle: url (bg_menu_2.jpg);
}
# bot1 do: skup {
obraz w tle: url (bg_menu_3.jpg);
}
Ale jak zdajemy sobie sprawę, zmieniliśmy tylko ścieżkę naszych obrazów tła, aby osiągnąć efekt, którego szukaliśmy.
Kod naszego przykład najazdu w CSS pokazane poniżej:
Kod:








POCZĄTEK


Obrazy można pobrać z tej strony, klikając obraz prawym przyciskiem myszy i zapisując jako.