Dar estilo al botón

Parte de la sección Dominio de CSS 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 parezca interactivo. Ahora mismo, parece texto sin formato: ¡convirtámoslo en un botón real con efectos al pasar el cursor y al hacer clic!

Tu desafío de CSS:

Aplica estilos a la clase .btn para que parezca un botón real y establece el color de fondo en #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 al pasar el cursor y al hacer clic sean suaves.
Añade margin-bottom al párrafo del encabezado para que no parezca 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>