Stylowanie linków i przycisków — pseudoklasy (:hover, :focus, :active)

Po co się tego uczymy?

Statyczny przycisk, który wygląda identycznie niezależnie od tego, co robi z nim użytkownik, sprawia wrażenie niedziałającego elementu — pseudoklasy to właśnie ten drobny, ale kluczowy szczegół, który sprawia, że strona "reaguje" i wygląda na w pełni funkcjonalną.

Teoria

Pseudoklasy pozwalają stylować element w zależności od JEGO STANU — np. tego, czy kursor myszy jest nad nim, czy jest właśnie klikany, czy ma fokus klawiatury. To one odpowiadają za "żywe", reagujące na działania użytkownika przyciski i linki.

Najważniejsze pseudoklasy:
:hover — element pod kursorem myszy (najczęściej używana).
:active — element w trakcie kliknięcia (naciśnięty).
:focus — element aktywny przez klawiaturę (np. zaznaczone pole formularza po naciśnięciu Tab) — KLUCZOWE dla dostępności, nigdy nie usuwaj domyślnego obramowania :focus bez zastąpienia go czymś równie widocznym.
:visited — link, który użytkownik już kiedyś odwiedził.

Klasyczna zasada zapamiętywania kolejności deklaracji dla linków to angielski akronim "LoVe HAte": :link, :visited, :hover, :active — zadeklarowane w INNEJ kolejności mogą się wzajemnie nadpisywać w nieoczekiwany sposób (zasada kaskadowości z Lekcji 5).

Płynne przejścia między stanami — transition:
transition: background-color 0.2s ease; — sprawia, że zmiana właściwości (tu: koloru tła) przy :hover nie jest nagła, tylko płynnie animowana przez podany czas. Bez tego zmiana koloru "przeskakuje" natychmiastowo.

Inne przydatne właściwości przy przyciskach:
cursor: pointer; — zmienia kursor myszy na "rączkę", sygnalizując, że element jest klikalny (domyślnie mają to linki, ale NIE mają tego np. znaczniki <div> czy <button> stylowane na nietypowe elementy).
border: none; — usuwa domyślne obramowanie przycisku HTML.

Schemat

Kolejność deklarowania pseudoklas linku (reguła "LoVe HAte"):

a:link     -> zwykły, jeszcze nieodwiedzony link
a:visited  -> link już odwiedzony przez użytkownika
a:hover    -> kursor myszy NAD linkiem
a:active   -> link w trakcie kliknięcia (wciśnięty)

Przykład z życia

Każdy przycisk na dowolnej stronie internetowej, który delikatnie zmienia kolor albo "unosi się" pod kursorem myszy, korzysta dokładnie z pseudoklasy :hover połączonej z transition dla płynności efektu.

Kod (CSS)

.przycisk {
    background-color: #5b7cf8;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.przycisk:hover {
    background-color: #4a6ae0; /* nieco ciemniejszy odcień przy najechaniu */
    transform: scale(1.05);    /* lekkie powiększenie */
}

.przycisk:active {
    transform: scale(0.98);    /* lekkie "wciśnięcie" podczas kliknięcia */
}

.przycisk:focus {
    outline: 3px solid #fbbf24; /* wyraźny, widoczny fokus dla obsługi klawiaturą */
}

a.link-nawigacji {
    color: #5b7cf8;
    text-decoration: none;
}

a.link-nawigacji:hover {
    text-decoration: underline;
}

Komentarz i wyjaśnienie kodu

transition: background-color 0.2s ease, transform 0.2s ease; deklaruje DWIE animowane właściwości naraz, oddzielone przecinkiem — obie zmienią się płynnie w ciągu 0.2 sekundy, zamiast skokowo. :focus jest tu celowo ostylowany WYRAŹNYM obramowaniem (outline), a nie usunięty — osoby korzystające z klawiatury (np. klawisza Tab) muszą widzieć, na którym elemencie aktualnie się znajdują; usunięcie outline bez zastąpienia go czymkolwiek to poważny błąd dostępności.

Ćwiczenie samodzielne

Dodaj do dowolnego przycisku efekt :hover zmieniający kolor tła, z płynnym przejściem przez transition.

Zadania do pracy własnej

Ostyluj link nawigacyjny tak, żeby podkreślenie pojawiało się DOPIERO po najechaniu myszą (:hover), a nie było widoczne domyślnie.
Zbuduj przycisk "Dodaj do koszyka" z efektem :hover (zmiana koloru) i :active (lekkie zmniejszenie przez transform: scale()), z płynnym transition na obu.
Ostyluj kompletną kartę filmu z katalogu tak, żeby CAŁA karta (nie tylko przycisk) delikatnie unosiła się i zyskiwała mocniejszy cień (box-shadow — Lekcja 10) po najechaniu myszą na nią, z płynnym transition — to bardzo częsty, rozpoznawalny efekt w prawdziwych sklepach internetowych.

Typowe błędy

Częsty błąd to zadeklarowanie pseudoklas w niewłaściwej kolejności (np. :hover przed :link) — przy tej samej sile selektora późniejsza reguła "wygrywa", co może sprawić, że :hover w ogóle nie zadziała. Drugi błąd: usunięcie outline na :focus bez zastąpienia go innym widocznym stylem — to realny problem dostępności dla osób korzystających z klawiatury. Trzeci: zapomnienie transition na elemencie BAZOWYM (nie na :hover) — animacja zadziała poprawnie tylko przy "wchodzeniu" w stan hover, ale będzie się urywać przy "wychodzeniu" z niego.

Nawiązanie do egzaminu zawodowego

Pseudoklasy CSS nie mają osobnego efektu w INF.03.5, ale są ściśle powiązane z efektem INF.03.5.3.2 ("stosuje w programowaniu obsługę zdarzeń myszy i klawiatury", dział JavaScript) — CSS realizuje reakcję WIZUALNĄ na te same zdarzenia, bez pisania choćby linijki JavaScript.