تنسيق الزر

جزء من قسم CSS Mastery في رحلة HTML على Coddy. الدرس 27 من 43.

التحدي

سهل

في هذا الدرس، سنجعل زر الحث على اتخاذ إجراء بارزًا ويبدو تفاعليًا. في الوقت الحالي، يبدو كنص عادي: لنحوّله إلى زر حقيقي مع تأثيرات التمرير والنقر!

تحدي CSS الخاص بك:

نسّق الفئة .btn لتبدو كزر حقيقي، واضبط background color على #ff9933.
استخدم :hover لتغيير background color عندما يمرر المستخدم المؤشر فوق الزر.
استخدم :active لتغيير background color عند النقر على الزر.
أضف transition حتى تبدو تأثيرات التمرير والنقر سلسة.
أضف margin-bottom للفقرة الموجودة في header، حتى لا تبدو قريبة جدًا من الزر.

جرّب بنفسك

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