Buttons তৈরি এবং কাস্টমাইজেশন

Foundation ফ্রেমওয়ার্কের Buttons তৈরি এবং কাস্টমাইজেশন অত্যন্ত সহজ এবং সুবিধাজনক। Foundation এ বিভিন্ন ধরনের বাটন (Button) এবং তাদের কাস্টমাইজেশন ফিচার রয়েছে, যা ডেভেলপারদের প্রোজেক্টের ডিজাইন অনুযায়ী বাটন তৈরি করতে সাহায্য করে। Foundation বাটনগুলি CSS এবং Sass দিয়ে কাস্টমাইজ করা যায়, এবং এটি রেসপনসিভ এবং মোবাইল-ফার্স্ট অ্যাপ্রোচে কাজ করে।

ফাউন্ডেশন বাটন তৈরি

Foundation-এ বাটন তৈরি করতে সাধারণত button বা a ট্যাগ ব্যবহার করা হয়, এবং এগুলোর জন্য নির্দিষ্ট ক্লাস যুক্ত করা হয়। এটি সহজ এবং দ্রুত কাস্টমাইজেশন সাপোর্ট করে।

বেসিক বাটন তৈরি:

<!-- বেসিক বাটন -->
<button class="button">বাটন ১</button>

লিঙ্ক বাটন তৈরি:

Foundation বাটনগুলি <a> ট্যাগের মাধ্যমে লিঙ্ক বাটন হিসেবেও তৈরি করা যায়।

<!-- লিঙ্ক বাটন -->
<a href="#" class="button">বাটন ২</a>

বাটনের রং এবং স্টাইল কাস্টমাইজেশন

Foundation বাটনগুলির জন্য বিভিন্ন ধরনের স্টাইলিং এবং রং প্রদান করা যায়। স্টাইল কাস্টমাইজ করার জন্য CSS ক্লাস ব্যবহার করা হয়।

রঙের সাথে বাটন কাস্টমাইজেশন:

<!-- প্রাথমিক বাটন -->
<button class="button primary">প্রধান বাটন</button>

<!-- সেকেন্ডারি বাটন -->
<button class="button secondary">সেকেন্ডারি বাটন</button>

<!-- সাফল্য বাটন -->
<button class="button success">সাফল্য</button>

<!-- বিপদ বাটন -->
<button class="button alert">বিপদ</button>

<!-- ইনফরমেশন বাটন -->
<button class="button info">ইনফো</button>

<!-- সতর্কতা বাটন -->
<button class="button warning">সতর্কতা</button>

• primary: প্রধান (প্রাথমিক) রং
• secondary: সেকেন্ডারি রং
• success: সফলতা
• alert: বিপদ
• info: ইনফরমেশন
• warning: সতর্কতা

বড় এবং ছোট বাটন কাস্টমাইজেশন:

Foundation-এ বাটনের আকারও কাস্টমাইজ করা যায়। বড় এবং ছোট বাটন তৈরি করতে large এবং small ক্লাস ব্যবহার করা হয়।

<!-- বড় বাটন -->
<button class="button large">বড় বাটন</button>

<!-- ছোট বাটন -->
<button class="button small">ছোট বাটন</button>

বাটন বর্ডার, রেডিয়াস এবং আউটলাইন কাস্টমাইজেশন

বর্ডার রেডিয়াস:

Foundation বাটনের বর্ডার রেডিয়াস কাস্টমাইজ করার জন্য radius ক্লাস ব্যবহার করা হয়।

<!-- রাউন্ডেড বাটন -->
<button class="button radius">রাউন্ডেড বাটন</button>

আউটলাইন বাটন:

আপনি চাইলে বাটনগুলোকে আউটলাইন বাটন হিসেবে কাস্টমাইজ করতে পারেন।

<!-- আউটলাইন বাটন -->
<button class="button outline">আউটলাইন বাটন</button>

বাটনের আধান এবং অ্যানিমেশন

Foundation বাটনগুলোর জন্য সহজেই স্পিনার বা লোডিং ইনডিকেটর ব্যবহার করা যায়, যা ইউজার ইন্টারফেসে উন্নতি আনে। এছাড়া, আপনি বাটনের উপর অ্যানিমেশন যোগ করতে পারেন।

লোডিং বাটন:

<button class="button is-loading">লোড হচ্ছে...</button>

এখানে is-loading ক্লাসটি বাটনের মধ্যে একটি লোডিং স্পিনার যোগ করবে।

Foundation বাটনের ব্যবহার এবং কাস্টমাইজেশন: উদাহরণ

একটি সম্পূর্ণ কাস্টমাইজড বাটন উদাহরণ:

<div class="row">
  <div class="small-12 medium-6 large-4 columns">
    <button class="button primary large">প্রধান বাটন</button>
  </div>
  <div class="small-12 medium-6 large-4 columns">
    <button class="button secondary small">সেকেন্ডারি বাটন</button>
  </div>
  <div class="small-12 medium-6 large-4 columns">
    <button class="button success radius">সাফল্য বাটন</button>
  </div>
</div>

এই কোডে:

• একটি প্রধান বাটন তৈরি হয়েছে যা বড় আকারের।
• একটি সেকেন্ডারি বাটন তৈরি হয়েছে যা ছোট আকারের।
• একটি সাফল্য বাটন তৈরি হয়েছে যার কোণ গুলো রাউন্ডেড।

বাটনের অবস্থান কাস্টমাইজেশন

Foundation-এ বাটনের অবস্থান নিয়ন্ত্রণ করতে align-center, align-left, এবং align-right ক্লাস ব্যবহার করা যায়।

<div class="row align-center">
  <button class="button">কেন্দ্রে অবস্থানরত বাটন</button>
</div>

<div class="row align-left">
  <button class="button">বাঁয়ে অবস্থানরত বাটন</button>
</div>

<div class="row align-right">
  <button class="button">ডান দিকে অবস্থানরত বাটন</button>
</div>

Foundation ফ্রেমওয়ার্কের বাটন তৈরি এবং কাস্টমাইজেশন খুবই সহজ এবং প্রোডাক্টিভ। Foundation এর প্রস্তুতকৃত ক্লাস এবং স্টাইলিং টুলগুলো ডেভেলপারদের দ্রুত এবং সুন্দর বাটন তৈরি করতে সহায়তা করে। আপনি যেকোনো ধরনের বাটন তৈরি করতে পারেন, যেমন প্রাথমিক, সেকেন্ডারি, বড় বা ছোট, আউটলাইন বাটন, এবং এমনকি লোডিং বাটনও। এর সাথে বিভিন্ন কাস্টমাইজেশন যেমন রঙ, আকার, বর্ডার রেডিয়াস, অবস্থান ইত্যাদি করে আপনার ওয়েবসাইটের ডিজাইনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তুলতে পারেন।