Bulma CSS ফ্রেমওয়ার্কের Button Component খুবই জনপ্রিয় এবং সহজে ব্যবহারযোগ্য। এটি বিভিন্ন ধরনের স্টাইল এবং কার্যকরী বৈশিষ্ট্য প্রদান করে, যা ডিজাইনকে সুন্দর এবং ইন্টারঅ্যাকটিভ করে তোলে। Bulma এর বাটন ক্লাস ব্যবহার করে আপনি সহজে বিভিন্ন ধরনের বাটন তৈরি করতে পারেন, যা আপনার ওয়েবসাইটের ইউজার ইন্টারফেসে সাদৃশ্য এবং কার্যকারিতা যোগ করে।
১. বেসিক বাটন
Bulma এর বেসিক বাটন তৈরি করতে আপনি শুধু button ক্লাস ব্যবহার করতে পারেন। এটি একটি সাদামাটা বাটন তৈরি করবে, যা আপনি স্টাইলিংয়ের মাধ্যমে কাস্টমাইজ করতে পারবেন।
<button class="button">Click Me</button>
এটি একটি সাধারণ বাটন তৈরি করবে যা ক্লিক করার জন্য প্রস্তুত।
২. বাটনের স্টাইল (Color Classes)
Bulma আপনাকে বিভিন্ন color classes প্রদান করে, যা দিয়ে আপনি বাটনের রঙ পরিবর্তন করতে পারবেন। যেমন:
- is-primary: প্রাথমিক রঙ (সাধারণত ব্লু)
- is-link: লিংক রঙ (আসন্ন/হালকা নীল)
- is-info: তথ্য রঙ (নীল)
- is-success: সফলতা রঙ (সবুজ)
- is-warning: সতর্কতা রঙ (হলুদ)
- is-danger: বিপদ রঙ (লাল)
- is-light: হালকা রঙ (হালকা পটভূমি)
- is-dark: গা dark ় রঙ
উদাহরণ:
<button class="button is-primary">Primary Button</button>
<button class="button is-success">Success Button</button>
<button class="button is-danger">Danger Button</button>
<button class="button is-info">Info Button</button>
এখানে বিভিন্ন ধরনের রঙের বাটন দেখানো হয়েছে, যা ক্লিকযোগ্য এবং ভিজ্যুয়ালভাবে আলাদা।
৩. আউটলাইন বাটন (Outline Button)
Bulma এর is-outlined ক্লাসটি বাটনকে আউটলাইন স্টাইলে তৈরি করে, যেখানে ব্যাকগ্রাউন্ড রঙ বাদে শুধু বর্ডার এবং টেক্সট রঙ প্রদর্শিত হয়।
উদাহরণ:
<button class="button is-outlined is-primary">Outlined Button</button>
<button class="button is-outlined is-danger">Outlined Button</button>
এই বাটনগুলি আউটলাইন স্টাইলের থাকবে, যা হালকা এবং আধুনিক অনুভূতি প্রদান করে।
৪. বাটন সাইজ
Bulma এর is-small, is-medium, এবং is-large ক্লাসগুলি বাটনের আকার নিয়ন্ত্রণ করতে সহায়তা করে। এই ক্লাসগুলির মাধ্যমে আপনি বাটনের সাইজ ছোট, মাঝারি বা বড় করতে পারবেন।
উদাহরণ:
<button class="button is-small">Small Button</button>
<button class="button is-medium">Medium Button</button>
<button class="button is-large">Large Button</button>
এটি বাটনের আকার নিয়ন্ত্রণ করার জন্য ব্যবহার করা হয়, যেখানে ছোট আকারের বাটন কম জায়গা নেবে, এবং বড় আকারের বাটন চোখে পড়বে।
৫. বাটন আইকন
Bulma আপনাকে Font Awesome বা অন্য কোনো আইকন লাইব্রেরি ব্যবহার করে বাটনের সাথে আইকন যুক্ত করার সুবিধা দেয়। এটি সাধারণত বাটনের মধ্যে একটি আইকন প্রদর্শন করতে ব্যবহৃত হয়।
উদাহরণ:
<button class="button is-primary">
<span class="icon is-small">
<i class="fas fa-check"></i>
</span>
<span>Submit</span>
</button>
এখানে span.icon এর মধ্যে Font Awesome আইকন ব্যবহার করা হয়েছে, যা বাটনের মধ্যে একটি চেক মার্ক আইকন প্রদর্শন করবে।
৬. বাটন গ্রুপ
Bulma এর buttons ক্লাসের মাধ্যমে আপনি একসাথে একাধিক বাটন গ্রুপ করতে পারেন। এটি সাধারণত ব্যবহারকারীর জন্য একটি সম্পর্কিত বাটন গুচ্ছ তৈরির জন্য ব্যবহৃত হয়।
উদাহরণ:
<div class="buttons">
<button class="button is-primary">Primary</button>
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
</div>
এটি একসাথে একাধিক বাটন তৈরি করবে এবং সেগুলিকে একটি গ্রুপ হিসেবে উপস্থাপন করবে।
৭. বাটন ডিসেবল (Disabled Button)
Bulma এর is-disabled ক্লাস দিয়ে আপনি বাটনটিকে নিষ্ক্রিয় করতে পারেন, যার ফলে ইউজার বাটনে ক্লিক করতে পারবে না।
উদাহরণ:
<button class="button is-primary is-disabled">Disabled Button</button>
এই বাটনটি ইনঅ্যাকটিভ থাকবে এবং ইউজার এটি ক্লিক করতে পারবে না।
৮. বাটনের লোডিং (Loading Button)
Bulma এর is-loading ক্লাস দিয়ে আপনি বাটনের মধ্যে একটি লোডিং ইন্ডিকেটর অ্যাড করতে পারেন, যা সাধারণত কোনো প্রসেস চলমান অবস্থায় ব্যবহার করা হয়।
উদাহরণ:
<button class="button is-primary is-loading">Loading...</button>
এটি একটি লোডিং বাটন তৈরি করবে, যেখানে টেক্সটের পরিবর্তে একটি স্পিনার থাকবে, যা ইঙ্গিত দেয় যে কোনো প্রক্রিয়া চলছে।
৯. বাটনের হোভার স্টাইল
Bulma ক্লাসের মাধ্যমে আপনি বাটনের হোভার স্টাইল কাস্টমাইজ করতে পারেন। তবে এটি ডিফল্টরূপে বুলমা বাটনগুলির জন্য কিছু হোভার ইফেক্ট প্রদান করে। যদি আপনি চান যে বাটনটি হোভার করার সময় কিছু বিশেষ পরিবর্তন হোক, আপনি CSS এর মাধ্যমে স্টাইল যোগ করতে পারেন।
উদাহরণ:
<style>
.button:hover {
background-color: #ffdd57;
}
</style>
<button class="button is-primary">Hover Over Me</button>
এটি বাটনের হোভার ইফেক্ট যোগ করবে, যাতে বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তিত হবে যখন ইউজার বাটনে মাউস রাখবে।
সারাংশ
Bulma এর Button Component অত্যন্ত ব্যবহারযোগ্য এবং কাস্টমাইজেবল। আপনি সহজেই বাটনগুলির রঙ, সাইজ, স্টাইল এবং আউটলাইন কাস্টমাইজ করতে পারেন। Bulma বিভিন্ন ধরনের বাটন বৈশিষ্ট্য যেমন ইকোন, ডিসেবল, লোডিং, হোভার ইফেক্ট এবং বাটন গ্রুপ প্রদান করে, যা আপনার প্রোজেক্টে ইউজার ইন্টারফেস উন্নত করতে সাহায্য করে। সহজেই ব্যবহারযোগ্য ক্লাস এবং স্টাইলিং অপশনগুলির মাধ্যমে আপনি আপনার বাটনগুলি কাস্টমাইজ করে একটি অত্যাধুনিক ডিজাইন তৈরি করতে পারবেন।
