CSS দিয়ে রাউন্ডেড এক্টিভ ও হোভার বাটন তৈরি করুন

বাটনে হোভার ইফেক্ট যোগ করতে :hover সিলেক্টর এবং রাউন্ডেড কোণার জন্য border-radius প্রোপার্টি ব্যবহার করা হয়। এক্টিভ স্টেটের জন্য .active ক্লাস ব্যবহার করা হয়।

উদাহরণ

নিচের কোডটি চালিয়ে রাউন্ডেড এক্টিভ ও হোভার বাটন তৈরি করার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .demo { 
        display: inline-block; 
      } 
      .demo a { 
        color: red; 
        padding: 5px 12px; 
        text-decoration: none; 
        border-radius: 5px; 
      } 
      .demo a.active { 
        background-color: orange; 
        color: white; 
        border-radius: 5px; 
      } 
      .demo a:hover:not(.active) { 
        background-color: yellow; 
      } 
    </style> 
  </head> 
  <body> 
    <h2>Our Quizzes</h2> 
    <div class="demo"> 
      <a href="prev.html"><</a> 
      <a href="quiz1.html">Quiz1</a> 
      <a href="quiz2.html">Quiz2</a> 
      <a href="quiz3.html">Quiz3</a> 
      <a href="quiz4.html" class="active">Quiz4</a> 
      <a href="next.html">></a> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: border-radius: 5px সব লিংকে রাউন্ডেড কোণা দিয়েছে। .active ক্লাসে ব্যাকগ্রাউন্ড نارঙ্গি ও টেক্সট সাদা। :hover:not(.active) এক্টিভ বাদে অন্যান্য লিংকে হোভার করলে হলুদ ব্যাকগ্রাউন্ড দেয়।