Mikrozachowania: kliknięcia, hover, błędy formularza

Mikrozachowania: kliknięcia, hover, błędy formularza

Mikrozachowania (microinteractions) to drobne, często niezauważalne animacje i reakcje interfejsu, które pełnią ważną funkcję użytkową. Wskazują interaktywność, potwierdzają akcje, sygnalizują błędy i poprawiają ogólne wrażenia z użytkowania strony.

W tej lekcji nauczysz się, jak tworzyć mikrozachowania za pomocą samego CSS – bez użycia JavaScriptu – i jak zastosować je w przyciskach, polach formularza i elementach UI.

1. Hover – najczęstsza forma mikrozachowania

Efekty hover informują użytkownika, że coś jest „klikalne”. Mogą zmieniać kolor, przesuwać element, powiększać go lub wywoływać animację.

.button {
  background-color: #0d6efd;
  color: white;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #084298;
}

Można też dodać efekt przesunięcia:

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

2. Kliknięcie – efekt „press” bez JavaScriptu

Efekty :active uruchamiane są w momencie kliknięcia – zanim element „odskoczy”. Pozwala to na dodanie wrażenia nacisku:

.button:active {
  transform: scale(0.97);
}

Można je połączyć z animacją:

.button {
  transition: transform 0.1s ease;
}

3. Focus i błędy w formularzu

Stan :focus jest kluczowy dla dostępności – warto wyróżniać aktywne pola formularzy:

input:focus {
  border-color: #0d6efd;
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
  transition: box-shadow 0.2s ease;
}

Błędy możemy oznaczać za pomocą :invalid – działa automatycznie, jeśli pole ma atrybut required lub type="email":

input:invalid {
  border-color: red;
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2);
}

Przykład HTML:

<form>
  <input type="email" required placeholder="Podaj e-mail">
  <button>Wyślij</button>
</form>

4. Połączenie mikrozachowań z animacjami

Mikrozachowania mogą być bardziej subtelne lub dynamiczne. Przykład: animacja ikony po najechaniu.

.icon {
  transition: transform 0.2s ease;
}

.icon:hover {
  transform: rotate(5deg) scale(1.05);
}

5. Przykład – kompletne mikrozachowanie przycisku

.button {
  padding: 0.8rem 1.6rem;
  background: #0d6efd;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.15s ease;
}

.button:hover {
  background: #0a58ca;
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px) scale(0.97);
}

Dobre praktyki

• Używaj transition przy każdej zmianie stanu – bez niej efekt może być zbyt gwałtowny
• Nie przesadzaj z intensywnością (np. zbyt duże obroty lub powiększenia)
• Dla formularzy – zawsze testuj :focus i :invalid
• Nie opieraj dostępności tylko na kolorach – dodawaj np. ikonę błędu lub opis błędu

Ćwiczenie

Stwórz formularz z polem e-mail i przyciskiem „Wyślij”:

• przycisk powinien reagować na :hover i :active zmianą koloru i przeskokiem
• pole e-mail powinno mieć podświetlenie przy :focus
• w przypadku pustego lub błędnego adresu – pole powinno być oznaczone na czerwono

Wniosek

Mikrozachowania to detale, które tworzą jakość interfejsu. Dzięki prostym efektom CSS użytkownik czuje, że strona „żyje”, że jego działania mają efekt, a interfejs jest przewidywalny i przyjazny. To właśnie one sprawiają, że projekt wydaje się dopracowany – nawet jeśli nikt nie potrafi wskazać konkretnie dlaczego.