বুটস্ট্রাপ ৫ এ Button স্টাইলিং এবং কাস্টমাইজেশন সহজেই করা যায়। বুটস্ট্রাপ প্রি-ডিফাইন্ড ক্লাস প্রদান করে, যা বিভিন্ন স্টাইল, সাইজ, রঙ এবং আউটলাইন বোতাম তৈরিতে সহায়তা করে। এছাড়া, আপনাকে প্রয়োজন অনুযায়ী কাস্টম সিএসএস দিয়ে আরো উন্নত কাস্টমাইজেশন করতে হতে পারে।
বুটস্ট্রাপ ৫ এর Button ক্লাস
বুটস্ট্রাপ ৫ এ বিভিন্ন button ক্লাস রয়েছে যা আপনাকে বিভিন্ন ধরনের বোতাম তৈরি করতে সহায়তা করবে। সাধারণভাবে btn ক্লাস ব্যবহার করে একটি বোতাম তৈরি করা হয় এবং তার সাথে অন্যান্য ক্লাস যোগ করে স্টাইল করা হয়।
১. Button Types (বোতামের ধরণ)
বুটস্ট্রাপ ৫ এ বিভিন্ন button types রয়েছে:
btn-primary: প্রাথমিক বোতাম (সবচেয়ে জনপ্রিয় স্টাইল)btn-secondary: সেকেন্ডারি বোতামbtn-success: সফল বোতাম (সবুজ)btn-danger: বিপদজনক বোতাম (লাল)btn-warning: সতর্কতা বোতাম (হলুদ)btn-info: তথ্য বোতাম (নীল)btn-light: হালকা বোতামbtn-dark: গা dark ় বোতামbtn-link: লিঙ্ক বোতাম
<button class="btn btn-primary">প্রাথমিক বোতাম</button>
<button class="btn btn-secondary">সেকেন্ডারি বোতাম</button>
<button class="btn btn-success">সফল বোতাম</button>
<button class="btn btn-danger">বিপদজনক বোতাম</button>
<button class="btn btn-warning">সতর্কতা বোতাম</button>
<button class="btn btn-info">তথ্য বোতাম</button>
<button class="btn btn-light">হালকা বোতাম</button>
<button class="btn btn-dark">গা dark ় বোতাম</button>
<button class="btn btn-link">লিঙ্ক বোতাম</button>
২. Button Size (বোতামের আকার)
বুটস্ট্রাপ ৫ এ বোতামের আকার কাস্টমাইজ করতে btn-lg (বড়), btn-sm (ছোট), এবং btn-block (ফুল-প্রস্থ) ক্লাস ব্যবহার করা হয়।
btn-lg: বড় বোতামbtn-sm: ছোট বোতামbtn-block: পুরো প্রস্থের বোতাম (ফুল-প্রস্থ)
<button class="btn btn-primary btn-lg">বড় বোতাম</button>
<button class="btn btn-secondary btn-sm">ছোট বোতাম</button>
<button class="btn btn-success btn-block">ফুল-প্রস্থ বোতাম</button>
৩. Button Outline (আউটলাইন বোতাম)
বুটস্ট্রাপ ৫ এ আউটলাইন বোতামও ব্যবহার করা যেতে পারে। আউটলাইন বোতাম সাধারণত নির্দিষ্ট রঙের বর্ডার এবং ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড নিয়ে আসে। এর জন্য btn-outline-* ক্লাস ব্যবহার করা হয়।
btn-outline-primarybtn-outline-secondarybtn-outline-successbtn-outline-dangerbtn-outline-warningbtn-outline-infobtn-outline-lightbtn-outline-dark
<button class="btn btn-outline-primary">আউটলাইন প্রাথমিক</button>
<button class="btn btn-outline-secondary">আউটলাইন সেকেন্ডারি</button>
<button class="btn btn-outline-success">আউটলাইন সফল</button>
<button class="btn btn-outline-danger">আউটলাইন বিপদজনক</button>
<button class="btn btn-outline-warning">আউটলাইন সতর্কতা</button>
<button class="btn btn-outline-info">আউটলাইন তথ্য</button>
<button class="btn btn-outline-light">আউটলাইন হালকা</button>
<button class="btn btn-outline-dark">আউটলাইন গা dark ়</button>
Button কাস্টমাইজেশন
বুটস্ট্রাপ ৫ এর বোতাম কাস্টমাইজ করতে, আপনি CSS ব্যবহার করে বোতামের স্টাইল আরও উন্নত করতে পারেন।
১. Button Hover Effects (বোতাম হোভার ইফেক্ট)
বোতামের উপর মাউস রাখলে কোন এফেক্ট প্রয়োগ করতে চাইলে আপনি সিএসএস ব্যবহার করতে পারেন:
<button class="btn btn-primary" id="hover-btn">হোভার করুন</button>
<style>
#hover-btn:hover {
background-color: #0056b3; /* বোতামের ব্যাকগ্রাউন্ড রঙ পরিবর্তন */
color: white; /* টেক্সটের রঙ পরিবর্তন */
}
</style>
২. Custom Button with Icons (আইকন সহ কাস্টম বোতাম)
বোতামে আইকন ব্যবহার করতে Font Awesome বা অন্য কোন আইকন লাইব্রেরি ব্যবহার করতে পারেন:
<button class="btn btn-success">
<i class="fas fa-check"></i> সফল
</button>
এখানে <i> ট্যাগের মধ্যে আইকন ক্লাস দেয়া হয়েছে।
৩. Custom Button Style (কাস্টম বোতাম স্টাইল)
আপনি আপনার নিজের বোতামের স্টাইলও তৈরি করতে পারেন সিএসএসের মাধ্যমে:
<button class="btn" style="background-color: #ff5733; color: white; border-radius: 20px;">
কাস্টম বোতাম
</button>
এখানে বোতামের ব্যাকগ্রাউন্ড, টেক্সট রঙ এবং বর্ডার রেডিয়াস কাস্টমাইজ করা হয়েছে।
সারাংশ
বুটস্ট্রাপ ৫ এ Button ক্লাস ব্যবহার করে সহজেই স্টাইলিং ও কাস্টমাইজেশন করা যায়। আপনি button types, sizes, outlines, hover effects, এবং custom styles ব্যবহার করে আপনার ওয়েবসাইটে বোতামগুলোর ডিজাইন এবং কার্যকারিতা কাস্টমাইজ করতে পারেন।
Read more
