Efekt po najechaniu

Lekcja 7 z 8 w kursie Projekt CSS — efektowny przycisk w Coddy.

Dodajmy jakiś efekt po najechaniu kursorem na przycisk!

Aby zmienić przycisk po najechaniu na niego kursorem, używamy pseudoklasy :hover,

.fancyButton:hover {
	background-color: red;
}

W powyższym przykładzie przycisk po najechaniu kursorem zmieni kolor na czerwony!

Aby przejście było płynne, użyj

.fancyButton {
	...
	transition: all 0.2s;
}

Możesz poeksperymentować z czasem trwania przejścia (0.2s).

Wyzwanie

Łatwy

Dodaj efekt po najechaniu do swojego przycisku, aby wyglądał świetnie!

Wymagane zadania:

Dodaj właściwość transition do swojego przycisku, z wybranym przez siebie czasem trwania nieprzekraczającym 1 sekundy.
Dodaj opacity: 0.8; do efektu po najechaniu na przycisk.

Opcjonalne i sugerowane właściwości do zmiany po najechaniu:

cienie (box-shadow)
kolor tła

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
    </body>
</html>

Wszystkie lekcje w sekcji Projekt CSS — efektowny przycisk

1Wprowadzenie

Wprowadzenie Część dotycząca HTML

2Projekt CSS

Rozmiary

Kolory

Obramowanie i zaokrąglenia

Cienie

Efekt po najechaniu Lekcja projektowa

Końcowe stylowanie

Poćwicz samodzielnie: Edytor online Web