Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক যা সহজ এবং কার্যকরী স্টাইলিং প্রদান করে। এটি ওয়েব ডেভেলপমেন্টে ব্যবহারকারী ইন্টারফেস তৈরি করতে সহায়ক, এবং Custom Button Styling ও Icon Buttons তৈরি করার জন্য উপযুক্ত। এখানে Custom Button Styling এবং Icon Buttons কিভাবে Pure.CSS এর মাধ্যমে তৈরি করা যায়, তা নিয়ে বিস্তারিত আলোচনা করা হয়েছে।
1. Custom Button Styling with Pure.CSS:
Custom buttons সাধারণত প্যাডিং, বর্ডার, ব্যাকগ্রাউন্ড কালার, টেক্সট স্টাইলিং এবং হোভার ইফেক্ট দ্বারা কাস্টমাইজ করা হয়। Pure.CSS আপনাকে বেসিক স্টাইলিং সেট করতে সাহায্য করে, তবে আপনি চাইলে আপনার নিজস্ব ডিজাইন এবং স্টাইলিং যোগ করতে পারেন।
Custom Button Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Button Styling with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Button Styling */
.custom-btn {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #4CAF50;
background-color: #4CAF50;
color: white;
border-radius: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.custom-btn:hover {
background-color: white;
color: #4CAF50;
}
.custom-btn:focus {
outline: none;
box-shadow: 0 0 0 2px #4CAF50;
}
</style>
</head>
<body>
<a href="#" class="custom-btn">Custom Button</a>
</body>
</html>
ব্যাখ্যা:
.custom-btnক্লাস: এটি বাটনের মূল স্টাইল। এখানে বর্ডার, ব্যাকগ্রাউন্ড কালার, প্যাডিং, ফন্ট সাইজ ইত্যাদি কাস্টমাইজ করা হয়েছে।- হোভার ইফেক্ট:
:hoverপসুডো ক্লাস ব্যবহার করে বাটন হোভার করার সময় ব্যাকগ্রাউন্ড এবং টেক্সট কালার পরিবর্তন করা হয়েছে। - ফোকাস স্টাইলিং:
:focusপসুডো ক্লাস ব্যবহার করে, বাটনটি যদি ফোকাস হয় (যেমন ট্যাব প্রেস করার সময়) তবে এর আশেপাশে একটি আউটলাইন অ্যাড করা হয়েছে।
2. Icon Buttons with Pure.CSS:
Icon buttons সাধারণত বাটনের মধ্যে একটি আইকন (যেমন FontAwesome, Material Icons, বা SVG আইকন) ব্যবহার করে তৈরি করা হয়। Pure.CSS তে এই ধরনের বাটন তৈরি করতে আপনি একটি আইকন লাইব্রেরি ব্যবহার করতে পারেন।
Icon Button Example with FontAwesome:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Buttons with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Icon Button Styling */
.icon-btn {
padding: 10px 20px;
font-size: 18px;
border: 2px solid #4CAF50;
background-color: #4CAF50;
color: white;
border-radius: 5px;
text-align: center;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.icon-btn:hover {
background-color: white;
color: #4CAF50;
}
.icon-btn i {
margin-right: 8px; /* Spacing between icon and text */
}
</style>
</head>
<body>
<a href="#" class="icon-btn">
<i class="fas fa-plus"></i> Add Item
</a>
<a href="#" class="icon-btn">
<i class="fas fa-trash-alt"></i> Delete Item
</a>
</body>
</html>
ব্যাখ্যা:
- FontAwesome: এখানে
FontAwesomeআইকন লাইব্রেরি ব্যবহার করা হয়েছে। আপনি অন্যান্য আইকন লাইব্রেরি (যেমন Material Icons বা Bootstrap Icons)ও ব্যবহার করতে পারেন। <i>ট্যাগ: আইকনটিiট্যাগের মধ্যে রাখা হয়েছে, এবংfas fa-plusঅথবাfas fa-trash-altক্লাস ব্যবহার করে আইকনগুলো প্রদর্শিত হচ্ছে।.icon-btnক্লাস: আইকন বাটনটির স্টাইলিং করেছে। বাটনের সাথে আইকনটি সেন্টার করা হয়েছে এবং টেক্সট এবং আইকনের মধ্যে মার্জিন দেয়া হয়েছে।
3. Customizing Icon Buttons Further:
আপনি আইকন বাটনগুলিকে আরও কাস্টমাইজ করতে পারেন বিভিন্ন স্টাইলিং অপশন ব্যবহার করে, যেমন:
- আইকন সাইজ পরিবর্তন:
font-sizeপ্রপার্টি দিয়ে আইকনের আকার কাস্টমাইজ করতে পারেন। - ব্যাকগ্রাউন্ড কালার পরিবর্তন: হোভার ইফেক্ট ব্যবহার করে ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে পারেন।
- অ্যানিমেশন: আইকনে বিভিন্ন অ্যানিমেশন যোগ করতে পারেন, যেমন আইকনটি বড় বা ছোট হওয়া।
Additional Customizations Example:
<i class="fas fa-shopping-cart" style="font-size: 30px;"></i>
এখানে, আইকনটির সাইজ বাড়ানোর জন্য font-size প্রপার্টি ব্যবহার করা হয়েছে।
Pure.CSS দিয়ে Custom Button Styling এবং Icon Buttons তৈরি করা সহজ এবং কার্যকরী। Pure.CSS আপনাকে সরলতা এবং দ্রুত ডেভেলপমেন্টের সুবিধা প্রদান করে, যেখানে আপনি প্রয়োজনীয় কাস্টম স্টাইল এবং ফিচারগুলো সংযুক্ত করতে পারেন। Custom buttons এবং icon buttons ব্যবহার করে আপনি আরও সুন্দর এবং ইউজার-ফ্রেন্ডলি ওয়েব ইন্টারফেস তৈরি করতে পারবেন।
Read more
