Materialize CSS-এ Icons এবং Buttons এর সমন্বয় তৈরি করা একটি সাধারণ কিন্তু অত্যন্ত কার্যকরী উপায়, যা ওয়েবসাইট বা অ্যাপ্লিকেশনের ইন্টারফেসকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে। আপনি সহজেই icons (আইকন) এবং buttons (বাটন) এর মধ্যে সমন্বয় ঘটাতে পারেন, যাতে একটি আইকন এবং টেক্সটের সাথে বাটন তৈরি করা হয়, যা ব্যবহারকারীর জন্য আরও সহজ ও আকর্ষণীয় হয়।
এখানে Materialize CSS ব্যবহার করে icons এবং buttons এর সমন্বয় করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
Materialize CSS-এ Icons এবং Buttons তৈরি করা
Materialize CSS একটি বিস্তৃত icon library সরবরাহ করে, যা Google Material Icons এর ভিত্তিতে তৈরি। আপনি এই আইকনগুলোকে বিভিন্ন buttons এর সাথে সমন্বয় করতে পারেন, যা ওয়েবসাইটে বিভিন্ন কার্যকরী বাটন তৈরি করতে সহায়তা করে।
১. Icon Button with Text
এখানে একটি আইকন বাটন তৈরি করা হলো, যেখানে একটি আইকন এবং টেক্সট একসাথে থাকবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Button Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Icon Button with Text -->
<a class="waves-effect waves-light btn">
<i class="material-icons left">add</i>
Add Item
</a>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
কোড ব্যাখ্যা:
waves-effect waves-light: এই ক্লাসগুলো ওয়েভ ইফেক্ট এবং হালকা ওয়েভ ইফেক্ট ব্যবহার করার জন্য।<i class="material-icons left">add</i>: এখানেmaterial-iconsক্লাসের মাধ্যমে Google Material Icons ব্যবহৃত হয়েছে এবংleftক্লাসের মাধ্যমে আইকনটি বাটনের বামে রাখা হয়েছে।- Add Item: টেক্সটটি বাটনের মধ্যে প্রদর্শিত হবে।
২. Icon Only Button
কখনো কখনো আপনি শুধুমাত্র একটি আইকন ব্যবহার করতে চাইবেন, যেখানে কোনো টেক্সট থাকবে না। এই ধরনের বাটন সাধারণত ছোট হতে পারে এবং শুধুমাত্র ইমেজ বা আইকন দ্বারা একটি কার্যকলাপ নির্দেশ করে।
<a class="waves-effect waves-light btn-small">
<i class="material-icons">edit</i>
</a>
কোড ব্যাখ্যা:
btn-small: এটি ছোট আকারের বাটন তৈরি করে।<i class="material-icons">edit</i>: এখানে edit আইকন ব্যবহার করা হয়েছে।
৩. Icon with Right-Aligned Text
এখানে, আইকন বাটনের মধ্যে আইকনটি ডান দিকে এবং টেক্সটটি বাম দিকে থাকবে।
<a class="waves-effect waves-light btn">
Edit
<i class="material-icons right">edit</i>
</a>
কোড ব্যাখ্যা:
right: এই ক্লাসের মাধ্যমে আইকনটিকে বাটনের ডান দিকে স্থাপন করা হয়েছে।- Edit: টেক্সটটি বাম দিকে থাকবে এবং আইকন ডান দিকে।
৪. Floating Action Button with Icon
Floating Action Button (FAB) হলো একটি বিশেষ ধরনের বাটন যা সাধারণত স্ক্রীনের নীচে স্থির অবস্থায় থাকে এবং একাধিক অ্যাকশন প্রদান করতে সহায়তা করে। এটি সাধারণত একটি বড় আইকনের সাথে ব্যবহার করা হয়।
<a class="btn-floating btn-large waves-effect waves-light red">
<i class="material-icons">add</i>
</a>
কোড ব্যাখ্যা:
btn-floating: এটি ফ্লোটিং অ্যাকশন বাটন তৈরি করে।btn-large: বড় আকারের বাটন তৈরি করে।red: বাটনের রঙ রেড (লাল) হবে।<i class="material-icons">add</i>: এখানে add আইকন ব্যবহার করা হয়েছে।
৫. Disabled Icon Button
কিছু সময় আপনি একটি নিষ্ক্রিয় বাটন তৈরি করতে চাইবেন, যা ব্যবহারকারীকে কোন অ্যাকশন নিতে দিতে না পারে। Materialize CSS এর মাধ্যমে নিষ্ক্রিয় বাটন তৈরি করা যায়।
<a class="waves-effect waves-light btn disabled">
<i class="material-icons left">delete</i>
Delete Item
</a>
কোড ব্যাখ্যা:
disabled: এই ক্লাসটির মাধ্যমে বাটনটিকে নিষ্ক্রিয় (disabled) করা হয়েছে।<i class="material-icons left">delete</i>: বাটনে delete আইকন ব্যবহার করা হয়েছে।
উপসংহার
Materialize CSS এর Icons এবং Buttons এর সমন্বয়ে আপনি সহজেই একাধিক আকর্ষণীয় এবং কার্যকরী বাটন তৈরি করতে পারেন। আইকন এবং টেক্সটের সমন্বয়, আইকন শুধুমাত্র বাটন, এবং Floating Action Button সহ বিভিন্ন ধরনের বাটন তৈরি করা খুবই সহজ। Materialize CSS এর আইকন লাইব্রেরি এবং বাটন ক্লাসের মাধ্যমে আপনি খুব সহজে এবং দ্রুত আপনার ওয়েবসাইটে ইন্টারঅ্যাকটিভ বাটন যোগ করতে পারবেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরো উন্নত করবে।
Read more
