কম্পিউটার টিউটোরিয়াল

CSS opacity দিয়ে বাটনে ট্রান্সপেরেন্সি (পারদর্শিতা) যোগ করুন

বাটনে ট্রান্সপেরেন্সি (পারদর্শিতা) যোগ করতে CSS opacity প্রোপার্টি ব্যবহার করা হয়। এটি বাটনকে ডিজেবলড (নিষ্ক্রিয়) দেখাতে সাহায্য করে।

উদাহরণ

নিচের কোডটি চালিয়ে বাটনে ট্রান্সপেরেন্সি যোগ করার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .btn1 { 
        color: black; 
        text-align: center; 
        font-size: 15px; 
      } 
      .btn2 { 
        color: black; 
        text-align: center; 
        font-size: 15px; 
        opacity: 0.8; 
      } 
    </style> 
  </head> 
  <body> 
    <h2>Result</h2> 
    <p>Click below for result:</p> 
    <button class="btn1">Enabled</button> 
    <button class="btn2">Disabled</button> 
  </body> 
</html>

ব্যাখ্যা: .btn2 ক্লাসে opacity: 0.8 সেট করা হয়েছে, যা বাটনকে ৮০% অপাক (২০% পারদর্শী) করে দিয়েছে। এটি দৃশ্যমান কিন্তু নিষ্ক্রিয় বোঝায়। বাস্তব ডিজেবল করার জন্য <button disabled> অ্যাট্রিবিউটও যোগ করুন।

  1. CSS দিয়ে হরিজন্টাল বাটন গ্রুপ তৈরি

  2. CSS দিয়ে ইমেজে বাটন যোগ করা

  3. CSS দিয়ে সার্চ বাটন তৈরি করার পদ্ধতি

  4. CSS দিয়ে হোভারে ট্রানজিশন ইফেক্ট যোগ করা