Effet de survol de bouton
Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 41 sur 43.
Défi
FacileUn bouton est déjà présent dans le HTML. Votre objectif est de faire en sorte qu'il s'agrandisse légèrement lorsque l'utilisateur le survole. Dans le CSS, stylisez la classe .cta-button de manière à ce que :
- Il ait une transition fluide
transition: transform 0.3s ease;. - Lors du survol, sa taille augmente légèrement en utilisant
transform: scale(1.05).
Essayez vous-même
<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>
Toutes les leçons de CSS Mastery
1Maîtrise des sélecteurs – Combinaisons
IntroductionSélecteur de descendantSélecteur d'enfantSélecteur de frère adjacentSélecteur de frère généralDéfi récapitulatif7Construire avec CSS Grid
Les bases de GridPlacement d'éléments Grid-rowZones nomméesDéfi récapitulatif2Pseudo-classes interactives
Pseudo-classesEffets de survolEffets de focusStyles actifsDéfi récapitulatif3Pseudo-classes structurelles
Pseudo-classes structurellesCibler le premier enfantCibler le dernier enfantLa puissance des motifs : utiliser nth-childDéfi récapitulatif6Landing Page
Styler la section d'en-têteStyler le boutonMise en page de la sectionMise en page des cartesAjouter les touches finales9Défis finaux
Mise en évidence du menu actifLignes de tableau en zèbreEffet de survol de boutonMise en page de cartes en GridImage Hero floutée