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

Od

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);
położenie w tle: środek u góry;
wysokość: 30px;
szerokość: 100px;
Blok wyświetlacza;
kolor: # 990000;
dekoracja tekstu: brak;
dopełnienie górnej: 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
położenie w tle: środek u góry;
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, a szerokość 100px, które są wymiarami naszych obrazów tła.
Blok wyświetlacza;
Żeby generował i szanował pudełko ze środkami, które postawiliś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.
dopełnienie górnej: 5px;
Dzięki temu zaoszczędzę przestrzeń 5px w górnej części naszego linku i tym samym obniża 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.