Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Google Material Design এর নীতির ভিত্তিতে তৈরি। এটি icon buttons এবং floating buttons এর মতো বিভিন্ন ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় কম্পোনেন্ট প্রদান করে, যা ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও আধুনিক এবং ফাংশনাল করে তোলে।
এখানে Icon Buttons এবং Floating Buttons ব্যবহার করার পদ্ধতি এবং তাদের সুবিধাগুলি বিস্তারিতভাবে আলোচনা করা হলো।
Icon Buttons
Icon buttons হলো এমন বাটন, যেগুলোর মধ্যে আইকন থাকে এবং সাধারণত ক্লিক করার জন্য ব্যবহৃত হয়। Materialize CSS-এ এই ধরনের বাটন খুব সহজেই তৈরি করা যায়। Icon buttons ব্যবহার করে আপনি আপনার ওয়েবসাইটে দ্রুত এবং আকর্ষণীয় ইন্টারঅ্যাকশন যোগ করতে পারেন।
Icon Button তৈরি করা
Materialize CSS-এ icon button তৈরি করতে নিচের ধাপগুলি অনুসরণ করুন:
আইকন অন্তর্ভুক্ত করা: Materialize CSS Material Icons ব্যবহার করে icon button তৈরি করতে পারবেন। প্রথমে আপনাকে Material Icons এর স্টাইল শীট যোগ করতে হবে।
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">আইকন বাটন তৈরি করা: এরপর,
btn-floatingক্লাস ব্যবহার করে floating button তৈরি করতে হবে এবং এর মধ্যে একটি আইকন নির্ধারণ করতে হবে।উদাহরণ:
<a class="btn-floating waves-effect waves-light red"> <i class="material-icons">add</i> </a>এখানে:
btn-floating: Floating button তৈরি করতে ব্যবহৃত ক্লাস।waves-effectএবংwaves-light: Materialize CSS এর ওয়েভ এফেক্ট এবং লাইট ওয়েভ এফেক্ট।red: বাটনের রঙ নির্ধারণ করে।<i class="material-icons">add</i>: আইকনটি এখানেaddনামে নির্ধারণ করা হয়েছে।
Icon Buttons এর সুবিধা
- বিস্তারিত ইন্টারফেস: আইকন বাটন ছোট এবং পরিষ্কার থাকে, যা ব্যবহারকারীকে দ্রুত কাজ সম্পন্ন করতে সহায়তা করে।
- ট্রান্সলুসেন্ট স্টাইল: ব্যবহারকারীরা সহজেই বাটনগুলো চিনতে পারে, কারণ এগুলি আধুনিক Material Design স্টাইলের।
- অত্যন্ত কাস্টমাইজেবল: আপনি বিভিন্ন আকার এবং রঙে icon button তৈরি করতে পারবেন।
Floating Buttons
Floating buttons হলো এমন বাটন, যেগুলি পেজের নিচের দিকে, সাধারণত ডান দিকে বা বামে ভাসমান অবস্থায় থাকে। এগুলি সাধারণত প্রধান ক্রিয়া (action) বা গুরুত্বপূর্ণ কনটেন্টের জন্য ব্যবহৃত হয়, যেমন Add, Send, Edit ইত্যাদি। Floating buttons ব্যবহার করে ইউজারদের কাছে সহজ এবং দ্রুত ইন্টারঅ্যাকশন নিশ্চিত করা যায়।
Floating Button তৈরি করা
Materialize CSS-এ floating button তৈরি করতে btn-floating ক্লাস ব্যবহার করা হয়। উদাহরণ:
<a class="btn-floating btn-large waves-effect waves-light red">
<i class="material-icons">add</i>
</a>
এখানে:
btn-floating: Floating button তৈরি করার জন্য প্রয়োজনীয় ক্লাস।btn-large: বাটনের আকার বড় করার জন্য।waves-effectএবংwaves-light: বাটনে ওয়েভ এফেক্ট যুক্ত করা।red: বাটনের রঙ নির্ধারণ করে।<i class="material-icons">add</i>: বাটনেaddআইকন যুক্ত করা হয়েছে।
Floating Button-এর বৈশিষ্ট্য
- ফ্লোটিং অবস্থান: ফ্লোটিং বাটন পেজের নিচের দিকে ডান বা বাম দিকে ভাসমান অবস্থায় থাকে, যা ব্যবহারকারীকে গুরুত্বপূর্ণ ক্রিয়া সম্পাদন করতে সহজ করে তোলে।
- স্মার্ট এবং আধুনিক ডিজাইন: Materialize CSS এর floating button ডিজাইনটি খুবই আধুনিক এবং ইন্টারঅ্যাকটিভ, যা Material Design এর নীতির উপর ভিত্তি করে তৈরি।
- কাস্টমাইজেশন: এটি সহজে কাস্টমাইজ করা যায়, যেমন আকার পরিবর্তন, রঙ পরিবর্তন এবং আইকন পরিবর্তন করা।
Multiple Floating Buttons
আপনি একাধিক floating button তৈরি করতে চাইলে floating action button group ব্যবহার করতে পারেন। এটি একটি গ্রুপ আকারে একাধিক বাটন তৈরি করার জন্য ব্যবহৃত হয়। উদাহরণ:
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
এখানে:
fixed-action-btn: এটি বাটন গ্রুপের জন্য ব্যবহৃত হয়।- বাটনগুলির মধ্যে আইকন এবং রঙ পরিবর্তন করা হয়েছে।
উপসংহার
Icon buttons এবং floating buttons হল Modern UI ডিজাইনে অত্যন্ত গুরুত্বপূর্ণ কম্পোনেন্ট। Materialize CSS এ এই দুটি কম্পোনেন্টের মাধ্যমে আপনি সহজে সুন্দর, ইন্টারঅ্যাকটিভ এবং ফাংশনাল ওয়েবসাইট তৈরি করতে পারবেন। Icon buttons ব্যবহারকারীদের জন্য দ্রুত অ্যাকশন সুবিধা প্রদান করে, আর floating buttons গুরুত্বপূর্ণ কার্যকলাপগুলি সহজে অ্যাক্সেস করার সুযোগ দেয়। Materialize CSS এই বাটনগুলো ব্যবহার করে আপনার ওয়েবসাইটের ডিজাইনকে আরও আধুনিক, আকর্ষণীয় এবং ব্যবহারযোগ্য করে তোলে।
Read more
