:active
Pasuje do elementu w chwili aktywacji, najczęściej gdy przycisk myszy jest wciśnięty nad przyciskiem lub linkiem.
Przykład
#.btn {
box-shadow: 0 4px 0 #4c1d95;
transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active {
transform: translateY(4px);
box-shadow: 0 0 0 #4c1d95;
}<button class="btn" type="button" style="padding: 10px 18px; border: 0; border-radius: 10px; background: #7c3aed; color: #fff; font: 600 15px system-ui, sans-serif; cursor: pointer;">Zacznij lekcję</button>Wciśnij przycisk i przytrzymaj: zjeżdża w dół, a cień pod nim znika, jak w prawdziwym klawiszu.
Definicja i zastosowanie
#Pseudoklasa :active trwa bardzo krótko: od wciśnięcia przycisku myszy (albo dotknięcia ekranu) do jego puszczenia. To moment naciśnięcia przycisku, dlatego nadaje się do efektu fizycznego wciśnięcia, na przykład lekkiego zmniejszenia albo przesunięcia w dół.
Najczęściej stosuje się ją do przycisków i linków. Dla użytkownika to potwierdzenie, że kliknięcie zostało zauważone, jeszcze zanim strona zareaguje na nie w inny sposób.
Kolejność reguł ma znaczenie. :active powinna stać po :hover, bo podczas kliknięcia oba stany obowiązują jednocześnie, a przy równej specyficzności wygrywa późniejsza reguła. Stąd znana kolejność dla linków: :link, :visited, :hover, :active.
Składnia
#selektor:active { właściwość: wartość; }Efekty wciśnięcia
#- Przycisk lekko się zmniejsza, jak wciśnięty klawisz. Wciśnij go i przytrzymaj.
- Wewnętrzny cień sprawia wrażenie, że przycisk się zagłębił.
- Przyciemnienie w chwili kliknięcia. Działa z każdym kolorem tła.
- Najpierw najedź, potem wciśnij. Reguła
:activestoi niżej, więc podczas kliknięcia wygrywa z:hover.
Efekty wciśnięcia w praktyce
#scale(0.95)
.demo:active { transform: scale(0.95); }inset box-shadow
.demo:active {
box-shadow: inset 0 3px 8px rgb(0 0 0 / 0.5);
}brightness(0.8)
.demo:active { filter: brightness(0.8); }:hover, potem :active
:active stoi niżej, więc podczas kliknięcia wygrywa z :hover..demo:hover { background: #6d28d9; }
.demo:active { background: #4c1d95; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Efekt
:activerób krótki i subtelny, z przejściem około 50 do 100 ms. Dłuższa animacja nie zdąży się pokazać, bo przycisk szybko zostaje puszczony. - Umieszczaj
:activepo:hoverw arkuszu, inaczej przy równej specyficzności efekt kliknięcia zostanie zasłonięty.
Powiązane hasła
#- :hoverPasuje do elementu, nad którym znajduje się kursor myszy. Podstawa efektów najechania na przyciski, linki i karty.
- :focusPasuje do elementu, który ma fokus, czyli przyjmuje teraz dane z klawiatury, np. do klikniętego pola formularza.
- :focus-visiblePasuje do elementu z fokusem wtedy, gdy przeglądarka uzna, że wskaźnik powinien być widoczny, np. przy nawigacji klawiaturą.
- transformPrzesuwa, obraca, skaluje lub pochyla element bez wpływu na układ strony.
- transitionSkrót, który sprawia, że zmiany wartości CSS następują płynnie, a nie skokowo.
- filterNakłada efekty graficzne na element: rozmycie, jasność, kontrast, skalę szarości i inne.
Widzisz błąd albo brakuje przykładu? Napisz do nas.