Tạo kiểu cho nút

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 27 trên 43.

Thử thách

Dễ

Trong bài học này, chúng ta sẽ làm cho nút kêu gọi hành động nổi bật và có cảm giác tương tác hơn. Hiện tại, nút trông như văn bản thông thường: hãy biến nó thành một nút thực sự với hiệu ứng di chuột và nhấp!

Thử thách CSS của bạn:

Tạo kiểu cho lớp .btn để nó trông như một nút thực sự, đặt màu nền thành #ff9933.
Dùng :hover để đổi màu nền khi người dùng di chuột lên nút.
Dùng :active để đổi màu nền khi người dùng nhấp vào nút.
Thêm transition để hiệu ứng di chuột và nhấp diễn ra mượt mà.
Thêm margin-bottom cho đoạn văn trong phần đầu trang để đoạn văn không quá sát nút.

Tự làm thử

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