Efekt najechania na przycisk
Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 41 z 43.
Wyzwanie
ŁatwyPrzycisk jest już w HTML. Twoim celem jest sprawić, by nieznacznie zwiększał rozmiar po najechaniu na niego kursorem. W CSS ostyluj .cta-button tak, aby:
- Miał płynne przejście
transition: transform 0.3s ease;. - Po najechaniu kursorem nieznacznie zwiększał rozmiar za pomocą
transform: scale(1.05).
Spróbuj swoich sił
<html>
<head>
<title>Button Hover Effect</title>
<style>
/* Add your styles here */
.cta-button {
background-color: #6a1b9a;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
}
</style>
</head>
<body>
<button class="cta-button">Click Me</button>
</body>
</html>
Wszystkie lekcje w sekcji Mistrzowskie opanowanie CSS
1Opanowanie selektorów – łączenie
WprowadzenieSelektor potomkaSelektor dzieckaSelektor sąsiadującego rodzeństwaSelektor ogólnego rodzeństwaWyzwanie podsumowujące7Twórz za pomocą CSS Grid
Podstawy GridRozmieszczanie elementów w wierszach siatkiNazwane obszaryWyzwanie podsumowujące2Interaktywne pseudoklasy
PseudoklasyEfekty najechania kursoremEfekty fokusuStyle aktywneWyzwanie podsumowujące3Strukturalne pseudoklasy
Strukturalne pseudoklasyWybieranie pierwszego elementu potomnegoWybieranie ostatniego elementu potomnegoMoc wzorców: użycie nth-childWyzwanie podsumowujące9Wyzwania końcowe
Wyróżnianie aktywnej pozycji menuNaprzemienne kolory wierszy tabeliEfekt najechania na przyciskUkład kart w siatceRozmyty obraz głównyPoćwicz samodzielnie: Edytor online Web