Pure.CSS এর সাহায্যে Button Groups তৈরি করা খুবই সহজ এবং কার্যকরী। Button Groups হল একটি গ্রুপ যা একাধিক বাটনকে একত্রিত করে একটি ইউনিফর্ম ব্লকের মধ্যে দেখায়। সাধারণত, যখন আপনি একাধিক সম্পর্কিত বাটন ব্যবহার করতে চান, যেমন ফিল্টার বাটন বা অপশন বাটন, তখন বাটন গ্রুপ ব্যবহার করা হয়।
Pure.CSS-এ Button Groups তৈরি করার জন্য কিছু মৌলিক পদক্ষেপ:
Pure.CSS আপনাকে একটি সহজ এবং লাইটওয়েট স্টাইলিং প্রদান করে, যা আপনাকে বাটন গ্রুপ দ্রুত তৈরি করতে সহায়তা করে। নিচে এর মাধ্যমে একটি Button Group তৈরি করার উদাহরণ দেওয়া হলো।
Button Group এর সাধারণ স্টাইল:
Pure.CSS নিজে থেকে বাটন গ্রুপের জন্য কোনো বিশেষ স্টাইলিং প্রদান না করলেও, আপনি সিম্পল CSS ক্লাস ব্যবহার করে বাটন গ্রুপ তৈরি করতে পারবেন।
উদাহরণ: Button Group তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Button Group</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.button-group {
display: inline-flex;
margin: 10px;
}
.button-group .pure-button {
border-radius: 0;
margin-right: -1px; /* To remove gap between buttons */
}
.button-group .pure-button:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div class="button-group">
<a href="#" class="pure-button pure-button-primary">Button 1</a>
<a href="#" class="pure-button pure-button-primary">Button 2</a>
<a href="#" class="pure-button pure-button-primary">Button 3</a>
</div>
</body>
</html>
ব্যাখ্যা:
- .button-group:
- এখানে
inline-flexব্যবহার করা হয়েছে, যাতে বাটনগুলো একে অপরের পাশে থাকে। আপনি flexbox এর মাধ্যমে বাটনগুলিকে সোজা করে রাখতে পারবেন। - margin-right: -1px ব্যবহার করা হয়েছে বাটনগুলোর মধ্যে কোনো ফাঁকা জায়গা না থাকার জন্য।
- এখানে
- pure-button:
- Pure.CSS এর ক্লাস pure-button সাধারণ বাটন তৈরির জন্য ব্যবহৃত হয়।
- pure-button-primary ক্লাসটি বাটনকে প্রাথমিক রঙের জন্য ব্যবহার করা হয়েছে (যেমন নীল বা অন্যান্য প্রাথমিক রঙ)।
- Styling Last Button:
.pure-button:last-childব্যবহার করে শেষ বাটনের জন্য মার্জিনটি তুলে নেওয়া হয়েছে, যাতে বাটন গ্রুপের মধ্যে অতিরিক্ত জায়গা না থাকে।
রেসপন্সিভ Button Groups:
Pure.CSS এর বাটন গ্রুপগুলো রেসপন্সিভ। আপনি চাইলে গ্রিড সিস্টেমের মাধ্যমে এগুলোকে আরও সুন্দরভাবে উপস্থাপন করতে পারেন। নিচে একটি রেসপন্সিভ বাটন গ্রুপের উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Button Group</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Mobile-first button group styles */
.button-group {
display: inline-block;
margin: 10px;
}
.button-group .pure-button {
margin-right: 5px;
}
/* Responsive Button Group */
@media (max-width: 600px) {
.button-group {
display: block;
}
.button-group .pure-button {
width: 100%;
margin-bottom: 5px;
}
.button-group .pure-button:last-child {
margin-bottom: 0;
}
}
</style>
</head>
<body>
<div class="button-group">
<a href="#" class="pure-button pure-button-primary">Button 1</a>
<a href="#" class="pure-button pure-button-primary">Button 2</a>
<a href="#" class="pure-button pure-button-primary">Button 3</a>
</div>
</body>
</html>
ব্যাখ্যা:
- Mobile-first Design:
- গ্রুপের মধ্যে বাটনগুলো মোবাইল ডিভাইসে 100% width হবে, যাতে প্রত্যেকটি বাটন পুরো স্ক্রীন প্রস্থ নেবে এবং একের পর এক প্রদর্শিত হবে।
- বড় স্ক্রীনে বাটনগুলো inline-block অবস্থায় থাকবে, অর্থাৎ তারা এক লাইনে থাকবে।
- @media Query:
@media (max-width: 600px)মিডিয়া কুয়েরি ব্যবহার করে, ছোট স্ক্রীন বা মোবাইল ডিভাইসে বাটনগুলিকে সম্পূর্ণ স্ক্রীন প্রস্থে নিয়ে আসে।
বাটন গ্রুপের আরও কাস্টমাইজেশন:
- আপনি হোভার ইফেক্টস এবং হাইলাইটিং যোগ করে বাটন গ্রুপগুলোকে আরও আকর্ষণীয় করতে পারেন।
- অ্যানিমেশন বা ট্রানজিশন যোগ করে বাটনগুলির উপর কাস্টম ইফেক্ট তৈরি করা যেতে পারে।
উদাহরণ:
<a href="#" class="pure-button pure-button-primary" style="transition: background-color 0.3s;">Button 1</a>
এটি একটি বাটনে হোভার করলে কালারের পরিবর্তন হবে, যা একটি মসৃণ অ্যানিমেশন তৈরি করবে।
Pure.CSS এর মাধ্যমে Button Groups তৈরি করা খুবই সহজ এবং দ্রুত। Flexbox ব্যবহার করে বাটন গ্রুপের মধ্যে সঠিকভাবে বাটনগুলো সাজানো যায় এবং Pure.CSS এর স্টাইল ক্লাসগুলি খুবই সাধারণ এবং ব্যবহারযোগ্য। আপনি বাটন গ্রুপের ডিজাইন এবং ব্যবহারকৃত স্টাইলিং কাস্টমাইজ করে আপনার প্রয়োজন অনুযায়ী সহজেই গ্রুপ তৈরি করতে পারেন।
Read more
