Atur Gaya Tombol

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 27 dari 43.

Tantangan

Mudah

Dalam pelajaran ini, kita akan membuat tombol ajakan bertindak lebih menonjol dan terasa interaktif. Saat ini, tombol itu tampak seperti teks biasa. Mari ubah menjadi tombol sungguhan dengan efek hover dan klik!

Tantangan CSS kamu:

Atur style class .btn agar tampak seperti tombol sungguhan, lalu atur warna latar belakang ke #ff9933.
Gunakan :hover untuk mengubah warna latar belakang saat pengguna mengarahkan kursor ke tombol.
Gunakan :active untuk mengubah warna latar belakang saat tombol diklik.
Tambahkan transition agar efek hover dan aktif terasa mulus.
Tambahkan margin-bottom pada paragraf di header agar jaraknya tidak terlalu dekat dengan tombol.

Coba sendiri

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