Stilizzare il pulsante

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 27 di 43.

Sfida

Facile

In questa lezione faremo risaltare il pulsante di invito all’azione e gli daremo un aspetto interattivo. Al momento sembra semplice testo: trasformiamolo in un vero pulsante con effetti al passaggio del mouse e al clic!

La tua sfida CSS:

Dai uno stile alla classe .btn per farla sembrare un vero pulsante e imposta il colore di sfondo su #ff9933.
Usa :hover per cambiare il colore di sfondo quando l’utente passa il mouse sul pulsante.
Usa :active per cambiare il colore di sfondo quando si fa clic sul pulsante.
Aggiungi una transition per rendere fluidi gli effetti al passaggio del mouse e al clic.
Aggiungi margin-bottom al paragrafo nell’intestazione, così non sarà troppo vicino al pulsante.

Provalo tu

<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>