Materialize CSS এর Button স্টাইলিং ওয়েব ডিজাইনে সহজে ব্যবহারযোগ্য এবং আকর্ষণীয় বাটন তৈরি করতে সহায়তা করে। Materialize এর বাটনগুলো Material Design এর নীতির উপর ভিত্তি করে ডিজাইন করা হয়েছে, যা সহজ, সোজাসাপ্টা এবং আধুনিক। এই বাটনগুলো বিভিন্ন সাইজ, রঙ এবং স্টাইলের মাধ্যমে কাস্টমাইজ করা যায়।
Materialize Button এর ধরন
Materialize CSS এ বিভিন্ন ধরনের বাটন ক্লাস রয়েছে, যা আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন অনুযায়ী ব্যবহার করতে পারবেন। নিচে কিছু সাধারণ button স্টাইলিং ফিচার এবং ক্লাস দেয়া হলো।
1. Primary Button
Primary button হচ্ছে একটি গুরুত্বপূর্ণ বাটন, যা ওয়েবসাইটের প্রধান কার্যকলাপ বা অ্যাকশনের জন্য ব্যবহার করা হয়। এটি সাধারণত আকর্ষণীয় রঙে প্রদর্শিত হয়, যেমন blue।
<a class="btn">Primary Button</a>
এখানে btn ক্লাস ব্যবহার করা হয়েছে, যা বাটনটি প্রাথমিক ডিজাইন দেবে। আপনি blue ক্লাসও যোগ করতে পারেন, যা বাটনটির রঙ নীল করে দিবে।
<a class="btn blue">Primary Button</a>
2. Secondary Button
Secondary button হল একটি কম গুরুত্বপূর্ণ বাটন, যেটি প্রাথমিক বাটনের তুলনায় একটু সাদা বা হালকা রঙের হয়ে থাকে।
<a class="btn grey">Secondary Button</a>
এখানে grey ক্লাস ব্যবহার করা হয়েছে, যা বাটনটির রঙ ধূসর করবে।
3. Flat Button
Flat button হচ্ছে এক ধরনের বাটন, যা কোন বর্ডার বা শেড ছাড়াই ফ্ল্যাট অবস্থায় প্রদর্শিত হয়। এটি সাধারণত সিম্পল এবং ক্লিন লুক প্রদান করে।
<a class="btn-flat">Flat Button</a>
4. Outline Button
Outline button হল একটি বর্ডারসহ বাটন, যা রঙ এবং ব্যাকগ্রাউন্ড ছাড়া শুধুমাত্র বর্ডার প্রদর্শিত হয়। এটি সাধারণত ইন্টেরেক্টিভ কম্পোনেন্টের জন্য ব্যবহার করা হয়।
<a class="btn-outline">Outline Button</a>
5. Floating Action Button (FAB)
Floating Action Button (FAB) হলো একটি সেলফ-প্রোজেক্টেড বাটন, যা সাধারণত স্ক্রীনের নীচে বা কর্নারে প্রদর্শিত হয় এবং এটি প্রধান বা গুরুত্বপূর্ণ অ্যাকশনকে প্রতিনিধিত্ব করে।
<a class="btn-floating btn-large"><i class="material-icons">add</i></a>
এখানে btn-floating ক্লাস দ্বারা বাটনটি floating অবস্থায় প্রদর্শিত হবে এবং btn-large দ্বারা এটি বড় আকারে দেখাবে। আপনি এখানে material-icons এর মাধ্যমে আইকনও যোগ করতে পারেন, যেমন add।
6. Disabled Button
Disabled button হলো এমন একটি বাটন, যা বর্তমানে নিষ্ক্রিয় থাকে এবং ইউজারের ইন্টারঅ্যাকশন বন্ধ করে দেয়।
<a class="btn disabled">Disabled Button</a>
এখানে disabled ক্লাস ব্যবহার করা হয়েছে, যা বাটনটিকে অক্ষম করে দিবে।
7. Button with Icon
আপনি Materialize CSS বাটনগুলোর সাথে আইকন যোগ করতে পারেন, যা একটি অত্যন্ত জনপ্রিয় বৈশিষ্ট্য। এই আইকনগুলো Material Icons লাইব্রেরি থেকে নেওয়া হয়।
<a class="btn"><i class="material-icons">cloud</i>Button with Icon</a>
এখানে cloud আইকন ব্যবহার করা হয়েছে, যা বাটনের সাথে একটি আইকন দেখাবে।
8. Button Size
Materialize CSS এ আপনি বাটনের সাইজ কাস্টমাইজ করতে পারেন। বাটনের সাইজ পরিবর্তন করতে আপনি btn-small, btn-large ইত্যাদি ক্লাস ব্যবহার করতে পারেন।
Small Button:
<a class="btn-small">Small Button</a>Large Button:
<a class="btn-large">Large Button</a>
9. Button Color Variations
Materialize CSS তে অনেক রঙের অপশন রয়েছে, যা আপনি বাটনের জন্য ব্যবহার করতে পারেন। কিছু সাধারণ রঙ ক্লাস হলো:
- blue:
btn blue - red:
btn red - green:
btn green - yellow:
btn yellow - purple:
btn purple
এছাড়া আপনি অন্যান্য রঙের সাথে বাটনের স্টাইল কাস্টমাইজ করতে পারেন।
<a class="btn red">Red Button</a>
<a class="btn green">Green Button</a>
10. Hover Effects
Hover effects বাটনের ইন্টারঅ্যাকটিভিটি বাড়ায়। Materialize CSS এর মাধ্যমে আপনি বাটনের ওপর মাউস নিয়ে গেলে এর স্টাইল পরিবর্তন করতে পারেন। এটি স্বয়ংক্রিয়ভাবে Materialize তে প্রয়োগ করা থাকে, কিন্তু আপনি চাইলে কাস্টম CSS ব্যবহার করে এটিকে আরও কাস্টমাইজ করতে পারেন।
উপসংহার
Materialize CSS এর button styling ফিচারটি ওয়েব ডিজাইনারদের জন্য খুবই কার্যকরী। এটি অনেক ধরনের স্টাইল, রঙ, সাইজ এবং ক্লাস প্রদান করে, যা দিয়ে আপনি আপনার প্রয়োজন অনুযায়ী বাটন তৈরি করতে পারেন। Primary button, secondary button, flat button, floating action button (FAB) ইত্যাদি ধরণের বাটন ব্যবহার করে আপনি আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং কার্যকরী করতে পারেন।
Read more
