Pure.CSS একটি হালকা ওজনের CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপারদের জন্য বেশ কিছু তৈরি করা উপাদান এবং স্টাইল প্রদান করে। এর মধ্যে একটি গুরুত্বপূর্ণ উপাদান হল Button। Pure.CSS এ Button Size, Disabled Buttons, এবং Active States এর জন্য আগেই প্রস্তুত স্টাইল এবং ক্লাস রয়েছে যা আপনাকে দ্রুত এবং সহজভাবে বাটন ডিজাইন করতে সাহায্য করবে।
এখানে, Pure.CSS এর Button Size, Disabled Buttons, এবং Active States এর ব্যবহার এবং কাস্টমাইজেশন সম্পর্কে বিস্তারিত আলোচনা করা হবে।
1. Button Size
Pure.CSS এ বাটনের জন্য বিভিন্ন আকারের অপশন রয়েছে। আপনি বাটনের সাইজ small, large, অথবা default সেট করতে পারেন।
Default Button Size:
Pure.CSS-এ ডিফল্ট বাটন সাইজ যথাযথভাবে স্টাইল করা থাকে, এবং যদি আপনি কোনও সাইজ না উল্লেখ করেন, তবে এটি সাধারণ আকারের হবে।
<button class="pure-button">Default Button</button>
Small Button Size:
ছোট সাইজের বাটন তৈরি করতে, আপনি pure-button-small ক্লাস ব্যবহার করতে পারেন।
<button class="pure-button pure-button-small">Small Button</button>
Large Button Size:
বড় সাইজের বাটন তৈরি করতে, আপনি pure-button-large ক্লাস ব্যবহার করতে পারেন।
<button class="pure-button pure-button-large">Large Button</button>
এখানে:
pure-buttonহল বাটনের ডিফল্ট স্টাইল।pure-button-smallএবংpure-button-largeবাটনের আকার ছোট এবং বড় করে।
2. Disabled Buttons
Disabled Buttons হল এমন বাটন যা ব্যবহারকারীর দ্বারা ক্লিক করা যায় না, এবং সাধারণত এটি ছিন্ন বা বিবর্ণ হয়ে থাকে। Pure.CSS এ আপনি সহজেই একটি বাটনকে ডিসেবল (অকার্যকর) করতে পারেন।
Disabled Button Example:
<button class="pure-button" disabled>Disabled Button</button>
এখানে:
disabledঅ্যাট্রিবিউট যোগ করার মাধ্যমে বাটনটি ডিসেবল হয়ে যাবে এবং এর স্টাইলও পরিবর্তিত হবে (বাটনটি ধূসর বা ছন্ন হয়ে যাবে)।
3. Active States
Active State বাটন ক্লিক করার পর, এটি ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন শো করার জন্য ব্যবহৃত হয়। Pure.CSS বাটনের জন্য স্বয়ংক্রিয়ভাবে একটি একটিভ স্টেট প্রদান করে, যা ব্যবহারকারীর ক্লিক করার পরে দৃশ্যমান হয়।
Active Button State Example:
<button class="pure-button pure-button-primary">Active Button</button>
এখানে, pure-button-primary ক্লাসটি বাটনটির জন্য একটি প্রাইমারি স্টাইল প্রদান করে এবং যখন ব্যবহারকারী এই বাটনে ক্লিক করে, তখন এটি সক্রিয় বা "active" অবস্থায় থাকবে।
Customizing Active State:
Pure.CSS বাটনের জন্য আপনি কাস্টম active স্টাইলও প্রয়োগ করতে পারেন যদি প্রয়োজন হয়।
<style>
.pure-button:active {
background-color: #ff9800;
color: white;
}
</style>
<button class="pure-button">Custom Active State</button>
এখানে, :active সেলেক্টর ব্যবহার করা হয়েছে, যা বাটনটি ক্লিক করার সময় ব্যাকগ্রাউন্ড কালার পরিবর্তন করবে।
4. Button Variants (Buttons with Different Styles)
Pure.CSS বাটনগুলির জন্য কিছু পূর্বনির্ধারিত স্টাইলও প্রদান করে। আপনি বিভিন্ন ধরনের বাটন তৈরি করতে পারেন, যেমন primary, secondary, success, warning, danger, ইত্যাদি।
Primary Button:
<button class="pure-button pure-button-primary">Primary Button</button>
Secondary Button:
<button class="pure-button pure-button-secondary">Secondary Button</button>
Success Button:
<button class="pure-button pure-button-success">Success Button</button>
Danger Button:
<button class="pure-button pure-button-danger">Danger Button</button>
Summary
Pure.CSS এর বাটনগুলি সহজে কাস্টমাইজযোগ্য এবং বিভিন্ন আকার এবং স্টাইল সরবরাহ করে:
- Button Size: আপনি
pure-button-smallএবংpure-button-largeক্লাস ব্যবহার করে বাটনের আকার নিয়ন্ত্রণ করতে পারেন। - Disabled Buttons:
disabledঅ্যাট্রিবিউট ব্যবহার করে আপনি বাটনটিকে নিষ্ক্রিয় করতে পারেন। - Active States: বাটনের
:activeপসিবল স্টাইলগুলি ব্যবহার করে একটি "active" ইন্টারঅ্যাকশন স্টেট তৈরি করতে পারেন। - Button Variants: Pure.CSS বিভিন্ন ধরনের বাটন স্টাইল (যেমন primary, secondary, success, danger) সরবরাহ করে।
এই ফিচারগুলির মাধ্যমে, আপনি আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটের বাটনগুলিকে অত্যন্ত কার্যকরী, সুন্দর এবং ব্যবহারকারী বান্ধব করতে পারবেন। Pure.CSS এর হালকা ও সহজ স্টাইলিং আপনার ওয়েব পেজকে দ্রুত লোড করতে সাহায্য করবে, এবং এর গ্রহনযোগ্য স্টাইলিং দিয়ে আপনি সহজেই প্রফেশনাল লুক তৈরি করতে পারবেন।
