Button-Hover-Effekt
Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 41 von 43.
Aufgabe
EinfachEine Schaltfläche ist bereits im HTML vorhanden. Dein Ziel ist es, sie leicht zu vergrößern, wenn der Benutzer mit der Maus darüber fährt. Gestalte in CSS die .cta-button so, dass:
- sie einen fließenden Übergang
transition: transform 0.3s ease;hat. - sie beim Darüberfahren mit der Maus mithilfe von
transform: scale(1.05)leicht vergrößert wird.
Probier es selbst
<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>
Alle Lektionen in CSS-Meisterschaft
1Selektoren-Meisterschaft – Kombinationen
EinführungNachfahren-SelektorKind-SelektorDirekter Nachbar-SelektorAllgemeiner Geschwister-SelektorWiederholungs-Challenge4Projekt: Dropdown-Menü
Das Untermenü hinzufügenDas Untermenü anzeigenWeiteres StylingInput und Button7Erstellen mit CSS Grid
Grid-GrundlagenGrid-row ElementplatzierungBenannte BereicheWiederholungs-Challenge2Interaktive Pseudoklassen
PseudoklassenHover-EffekteFokus-EffekteAktiv-StylesWiederholungs-Challenge3Strukturelle Pseudoklassen
Strukturelle PseudoklassenDas erste Kind-Element ansprechenDas letzte Kind-Element ansprechenMuster-Power: nth-child nutzenWiederholungs-Challenge6Landing Page
Header-Bereich stylenDen Button stylenSektions-LayoutCard-LayoutDen letzten Schliff hinzufügen9Abschluss-Herausforderungen
Aktives Menü hervorhebenZebra-TabellenzeilenButton-Hover-EffektGrid-Card-LayoutVerschwommenes Hero-ImageÜbe selbstständig: Web-Playground