Bulma CSS ফ্রেমওয়ার্কে বাটনের স্টাইল এবং সাইজ কাস্টমাইজ করা খুব সহজ। বুলমা আপনাকে বিভিন্ন ধরনের Button Size, Button Color, এবং Button Styles ব্যবহারের সুযোগ দেয়, যাতে আপনি আপনার ওয়েবসাইটের ডিজাইন অনুসারে বাটনগুলি কাস্টমাইজ করতে পারেন।
১. বাটন সাইজ (Button Size)
Bulma ফ্রেমওয়ার্কে বাটনের সাইজ কাস্টমাইজ করার জন্য কিছু পূর্বনির্ধারিত ক্লাস রয়েছে। আপনি সেগুলি ব্যবহার করে বাটনের সাইজ বড় বা ছোট করতে পারেন।
বাটন সাইজ ক্লাস:
- is-small: ছোট সাইজের বাটন।
- is-medium: মডারেট সাইজের বাটন (ডিফল্ট সাইজ)।
- is-large: বড় সাইজের বাটন।
উদাহরণ:
<div class="container">
<button class="button is-small">Small Button</button>
<button class="button is-medium">Medium Button</button>
<button class="button is-large">Large Button</button>
</div>
এখানে is-small, is-medium, এবং is-large ক্লাসগুলি বাটনের সাইজ নির্ধারণ করতে ব্যবহৃত হয়েছে।
২. বাটন রঙ (Button Color)
Bulma বিভিন্ন রঙের বাটন তৈরি করার জন্য কিছু ক্লাস প্রদান করে, যা আপনার প্রোজেক্টে ব্যবহার করতে পারবেন। এই রঙগুলো সিএসএস এর background-color প্রপার্টি নিয়ন্ত্রণ করে।
বাটন রঙের ক্লাস:
- is-primary: প্রাথমিক রঙ (সবচেয়ে সাধারণ রঙ, সাধারণত ব্লু)।
- is-link: লিংক বা নীল রঙ।
- is-info: ইনফরমেশন বা আকাশী রঙ।
- is-success: সাকসেস বা সবুজ রঙ।
- is-warning: সতর্কতা বা হলুদ রঙ।
- is-danger: বিপদ বা লাল রঙ।
- is-light: হালকা রঙ (প্রায় সাদা বা নরম রঙ)।
- is-dark: গা dark ় রঙ।
- is-white: সাদা রঙ।
- is-black: কালো রঙ।
উদাহরণ:
<div class="container">
<button class="button is-primary">Primary Button</button>
<button class="button is-link">Link Button</button>
<button class="button is-info">Info Button</button>
<button class="button is-success">Success Button</button>
<button class="button is-warning">Warning Button</button>
<button class="button is-danger">Danger Button</button>
<button class="button is-light">Light Button</button>
<button class="button is-dark">Dark Button</button>
<button class="button is-white">White Button</button>
<button class="button is-black">Black Button</button>
</div>
এখানে is-primary, is-link, is-info, is-success, is-warning, is-danger ইত্যাদি ক্লাসগুলো বিভিন্ন রঙের বাটন তৈরি করতে ব্যবহৃত হয়েছে।
৩. বাটন স্টাইল (Button Styles)
Bulma ফ্রেমওয়ার্কে বাটন স্টাইল কাস্টমাইজ করার জন্য বিভিন্ন ক্লাস রয়েছে। আপনি বাটনের বিভিন্ন স্টাইল যেমন আউটলাইন, আন্ডারলাইন, বর্ডারসহ ইত্যাদি ব্যবহার করতে পারবেন।
বাটন স্টাইল ক্লাস:
- is-outlined: আউটলাইন বাটন (বর্ডারসহ কিন্তু ব্যাকগ্রাউন্ড ছাড়া)।
- is-inverted: ইনভার্টেড বাটন (বিভিন্ন কনটেক্সটে আলাদা স্টাইল)।
- is-rounded: রাউন্ডেড (কোণ গোলাকার) বাটন।
- is-loading: লোডিং স্টেট বাটন (লোডিং অ্যানিমেশন সহ)।
- is-static: স্ট্যাটিক বাটন (অপরিবর্তিত অবস্থায় রাখা হয়)।
উদাহরণ:
<div class="container">
<button class="button is-primary is-outlined">Outlined Primary</button>
<button class="button is-info is-rounded">Rounded Info Button</button>
<button class="button is-success is-loading">Loading Success</button>
<button class="button is-danger is-inverted">Inverted Danger Button</button>
<button class="button is-dark is-static">Static Dark Button</button>
</div>
এখানে is-outlined, is-rounded, is-loading, is-inverted, এবং is-static ক্লাসগুলি বাটনের স্টাইল পরিবর্তন করতে ব্যবহৃত হয়েছে।
৪. বাটন গ্রুপ (Button Group)
Bulma ফ্রেমওয়ার্কে একাধিক বাটন একত্রে গ্রুপ হিসেবে প্রদর্শন করার জন্য buttons ক্লাস ব্যবহার করা যায়।
উদাহরণ:
<div class="buttons">
<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-info">Info</button>
</div>
এখানে buttons ক্লাস দিয়ে একাধিক বাটন গ্রুপ করা হয়েছে, যা পাশাপাশি দেখানো হবে।
সারাংশ
Bulma ফ্রেমওয়ার্কে বাটনগুলি সহজেই কাস্টমাইজ করা যায়। আপনি button size ক্লাস ব্যবহার করে বাটনের আকার নিয়ন্ত্রণ করতে পারেন, button color ক্লাস ব্যবহার করে বিভিন্ন রঙের বাটন তৈরি করতে পারেন, এবং button styles ক্লাস ব্যবহার করে বাটনের আউটলাইন, রাউন্ডেড, লোডিং ইত্যাদি স্টাইল প্রয়োগ করতে পারেন। এই ক্লাসগুলো ব্যবহার করে আপনি সহজেই আপনার প্রোজেক্টের ডিজাইন অনুসারে বাটন কাস্টমাইজ করতে পারবেন।
