Zmiana koloru linka po najechaniu kursorem – CSS

Kategoria wpisu Kurs CSS, Kursy Tagi: , , , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Zmiana koloru linku (<a></a>) stanowi jeden z podstawowych efektów, jakie występują na stronie internetowej.

Domyślnie tę cechę posiadają wszystkie linki na stronie kolor i sposób interpretacji uzależniony jest od przeglądarki z której korzystamy – lub tego jak zaprogramuje ją autor. Kolory można bowiem w bardzo łatwy sposób zmieniać a sam efekt dodawać do innych obiektów.

W tym wpisie postaram się przedstawić kilka ciekawych efektów polegających na zmianie koloru i tła pod linkiem, które można także wykorzystać np. do budowy przycisku. Efekty będą aktywowane po najechaniu kursorem myszy (efekt hover) dzięki czemu będziecie mogli ożywić trochę wasze strony internetowe.

Poznaj :hower

Poniższe przykłady będą dość proste, ale stanową punkt wejściowy do bardziej skomplikowanych animacji.

Wzór selektora :hover

Selektor ten może być dodawany do dowolnego obiektu, nie tylko linku np. efekt powiększenia na obrazkach.

Przykładowa reguła dla tego selektora może zaś wyglądać tak:

Zmiana koloru linku po najechaniu kursorem:


przykładowy link

Oraz jego kod

W pliku CSS zapisujemy z kolei kod

Jak widać w powyższym przykładzie po najechaniu kursorem tekst zmienia swój kolor. Jednak kiedy nie mamy na nim kursora wygląda normalnie.

Zmiana tła pod linkiem – kolor:

Zmiana koloru tła jest bardzo prostym efektem nie wymagającym sporej wiedzy. Efekt ten jest najczęściej spotykany w różnego typu przyciskach. Zaprezentowany niżej przykład jest jednak bardzo prosty i by wyglądał jak prawdziwy guzik musi zostać nieco zmodyfikowany.

przykładowy link

W pliku CSS zapisujemy z kolei kod

Zmiana tła pod linkiem – obrazek:

Jako tło można także ustawić obrazek lub grafikę.
W ten sposób można np. uzyskać efekt:
przykładowy link

W pliku CSS zapisujemy z kolei kod

Oczywiście kolor waszego linka zależy od was tak samo jak to co pod nim umieścicie.

Prosty przycisk:

Poniżej przykładowy przycisk z tłem gradientowym

Prosty przycisk

Więcej ciekawych informacji znajdziecie w wpisie o ustawieniu tła na stronie.

Tagi:
Linki zmieniające kolor
Jak zmienić kolor anchora
link zmieniający kolor bez dreamweaver
zmiana koloru po najechaniu
hover CSS
odnośnik anchor
Zmiana koloru czcionki po najechaniu myszką

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *