INF.03 · HTML i CSS

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

Link i przycisk reagują także na klawiaturę.

  • Przewidź efekt
  • Zmień i sprawdź
  • Zbuduj samodzielnie

Po tej lekcji: Rozróżnisz stany elementów oraz zachowasz widoczny fokus i ograniczysz zbędny ruch.

Zrozum, zanim zapiszesz

Link a z href prowadzi do adresu; button wykonuje działanie. Nie używaj pustego href="#" zamiast przycisku. :hover odpowiada na wskazanie, :active na aktywację, :focus na fokus, a :focus-visible gdy przeglądarka uzna widoczne oznaczenie za potrzebne, np. przy klawiaturze.

.przycisk:hover i .przycisk:focus-visible mogą współdzielić kolor, ale fokus wymaga wyraźnego outline z offsetem. :disabled opisuje nieaktywny przycisk. ::before i ::after tworzą pseudoelementy; nie umieszczaj w nich jedynej istotnej instrukcji.

transition: background-color .2s, transform .2s opisuje przejście między stanami. Animacja nie może być warunkiem zrozumienia. Przy prefers-reduced-motion: reduce wyłącz zbędne przejścia i przesunięcia. Na ekranie dotykowym hover nie jest pewną metodą odkrywania funkcji.

Przygotuj HTML do tego przykładu

Ten fragment wstaw do body dokumentu z lekcji 1. W head dodaj <link rel="stylesheet" href="style.css">. Kolejny blok zapisz w osobnym pliku style.css, obok index.html.

index.html — fragment bodyhtml
<button class="przycisk" type="button">Szczegóły</button>
<!-- Wygląd nie dodaje jeszcze działania. Obsługę kliknięcia poznasz w JavaScript. -->

Przykład do odtworzenia

style.csscss
/* HTML: <button class="przycisk" type="button">Szczegóły</button> */
.przycisk {
  background: #173f55; color: #fff; border: 0; padding: .8rem 1.2rem;
  transition: background-color .2s, transform .2s;
}
.przycisk:hover { background: #245f7f; transform: translateY(-2px); }
.przycisk:active { transform: translateY(0); }
.przycisk:focus-visible { outline: 3px solid #b04b00; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .przycisk { transition: none; }
  .przycisk:hover { transform: none; }
}

Sprawdź w działaniu

Przetestuj mysz i klawisz Tab

Najedź na przycisk, naciśnij go, a następnie przejdź do niego klawiszem Tab. Porównaj trzy różne stany.

Ta interakcja wymaga włączonego JavaScriptu.

Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.

Przejście stanu czy własne klatki?

Transition potrzebuje zmiany wartości między stanami. Animation opisuje klatki w @keyframes i może działać bez hover. Poniżej plakat pojawia się raz, w 0.4 sekundy; nie zapętlaj ruchu bez potrzeby. Ta sama treść musi pozostać dostępna przy ograniczonym ruchu.

Jednorazowe pojawienie się ilustracji

Dodaj klasę plakat do img z wcześniejszej lekcji. Reguła ograniczonego ruchu pozostawia obraz widoczny.

style.csscss
@keyframes pojawienie {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.plakat { animation: pojawienie .4s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .plakat { animation: none; }
}

Ćwiczenie z pomocą · samodzielna praca

Zbuduj samodzielnie — z pomocą, gdy potrzebujesz

Przygotuj link Powrót do repertuaru i przycisk Zobacz szczegóły. Nadaj im style hover, active i focus-visible. Fokus ma być widoczny przy nawigacji Tab, a informacja dostępna bez najeżdżania. Dodaj regułę ograniczającą ruch.

Oczekiwany rezultat
Tab pokazuje wyraźną obwódkę. Enter aktywuje link, a przycisk działa także klawiaturą po podłączeniu działania.
Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź

W HTML dobierz a dla nawigacji i button type="button" dla działania.

Krok 2 — pokaż podpowiedź

Nie usuwaj outline bez czytelnego zamiennika.

Krok 3 — pokaż podpowiedź

Dodaj media query prefers-reduced-motion i sprawdź brak przesunięcia.

Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.

Sprawdź, zanim oddasz

Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.

Podsumowanie

Co warto zapamiętać

  1. Rozróżnisz stany elementów oraz zachowasz widoczny fokus i ograniczysz zbędny ruch.
  2. Potrafisz wskazać w kodzie przyczynę widocznego efektu.
  3. Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →
Źródła i dalsza nauka