Dar estilo al botón

Parte de la sección CSS Mastery del Journey de HTML de Coddy. Lección 27 de 43.

Desafío

Fácil

En esta lección, haremos que el botón de llamada a la acción destaque y se sienta interactivo. Ahora mismo, parece texto plano — ¡vamos a convertirlo en un botón real con efectos de hover y clic!

Tu Desafío de CSS:

Estiliza la clase .btn para que parezca un botón real, establece el color de fondo a #ff9933.
Usa :hover para cambiar el color de fondo cuando el usuario pase el cursor sobre el botón.
Usa :active para cambiar el color de fondo cuando se haga clic en el botón.
Añade una transition para que los efectos de hover y active se sientan fluidos.
Añade margin-bottom para el párrafo en el encabezado, para que no se vea demasiado cerca del botón.

Pruébalo tú mismo

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