Styler le bouton

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

Défi

Facile

Dans cette leçon, nous allons faire ressortir le bouton d’appel à l’action et lui donner un aspect interactif. Pour l’instant, il ressemble à du texte ordinaire : transformons-le en véritable bouton avec des effets au survol et au clic !

Votre défi CSS :

Stylisez la classe .btn pour lui donner l’apparence d’un véritable bouton, et définissez la couleur d’arrière-plan sur #ff9933.
Utilisez :hover pour modifier la couleur d’arrière-plan lorsque l’utilisateur survole le bouton.
Utilisez :active pour modifier la couleur d’arrière-plan lorsque le bouton est cliqué.
Ajoutez une transition afin que les effets de survol et d’activation soient fluides.
Ajoutez margin-bottom au paragraphe de 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>