Styler le bouton

Fait partie de la section CSS Mastery du Journey HTML de Coddy. Leçon 27 sur 43.

Défi

Facile

Dans cette leçon, nous allons faire en sorte que le bouton d'appel à l'action se démarque et soit interactif. Pour l'instant, il ressemble à du texte brut — transformons-le en un véritable bouton avec des effets de survol et de clic !

Votre défi CSS :

Stylez la classe .btn pour qu'elle ressemble à un vrai bouton, définissez la couleur d'arrière-plan sur #ff9933.
Utilisez :hover pour changer la couleur d'arrière-plan lorsque l'utilisateur survole le bouton.
Utilisez :active pour changer la couleur d'arrière-plan lorsque le bouton est cliqué.
Ajoutez une transition pour que les effets de survol et d'activation soient fluides.
Ajoutez une margin-bottom pour le paragraphe dans l'en-tête, afin qu'il ne soit pas trop proche du bouton.

Essayez vous-même

<html>
<head>
  <title>Hobby Club Landing Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    
  <header class="hero">
      <div class="container">
        <h1>Welcome to Hobby Club</h1>
        <p>Find your passion. Join a community. Grow your skills.</p>
        <a href="#" class="btn">Get Started</a>
      </div>
  </header>

  <section class="features">
    <h2 class="section-title">Popular Clubs</h2>
    <div class="cards">
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Android_Emoji_1f4f7_red.svg" width="20px"></div>
        <h3>Photography</h3>
        <p>Capture the moment and share your perspective.</p>
      </div>
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Emoji_u1f3a8.svg" width="20px"></div>
        <h3>Art & Design</h3>
        <p>Draw, paint, and bring your creative ideas to life.</p>
      </div>
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Emoji_u1f3ae.svg" width="20px"></div>
        <h3>Gaming</h3>
        <p>Connect with fellow gamers and play your favorite titles.</p>
      </div>
    </div>
  </section>

</body>
</html>