Pure.CSS একটি মিনিমালিস্ট CSS ফ্রেমওয়ার্ক, যা বেসিক এবং কার্যকরী ডিজাইন উপাদান প্রদান করে। এর মধ্যে বাটন স্টাইলিংও অন্তর্ভুক্ত রয়েছে, যা ব্যবহার করে আপনি সহজে বিভিন্ন বাটন তৈরি করতে পারেন। Pure.CSS এর ডিফল্ট বাটন স্টাইলগুলি খুবই সিম্পল এবং ক্লিন, তবে আপনি প্রয়োজন অনুসারে এগুলিকে কাস্টমাইজ করতে পারেন।
Pure.CSS Default Button Styles:
Pure.CSS-এ ডিফল্টভাবে কিছু বেসিক বাটন স্টাইলস প্রদান করা হয়। এগুলি খুবই মিনিমালিস্ট এবং ব্যবহার করা সহজ। এখানে কিছু সাধারণ ডিফল্ট বাটন স্টাইল এবং তাদের ব্যবহার দেওয়া হলো।
1. Basic Button:
Pure.CSS এর ডিফল্ট বাটন স্টাইলটি খুবই সিম্পল এবং সুন্দর। আপনি এটি খুব সহজে যেকোনো HTML ফাইলের মধ্যে ব্যবহার করতে পারেন।
<button class="pure-button">Default Button</button>
এই বাটনটি সাদা ব্যাকগ্রাউন্ড, সিম্পল বর্ডার এবং ব্লু হোভার ইফেক্ট সহ একটি সাধারণ বাটন তৈরি করবে।
2. Primary Button:
Pure.CSS এ একটি primary বাটন ক্লাসও রয়েছে, যা আপনাকে আরও দৃশ্যমান বাটন তৈরি করতে সাহায্য করে। এটি সাধারণ বাটনটির তুলনায় আরও হাইলাইটেড এবং প্রাধান্য পায়।
<button class="pure-button pure-button-primary">Primary Button</button>
ব্যাখ্যা:
pure-button-primaryক্লাসটি বাটনের ব্যাকগ্রাউন্ড রঙকে একটি প্রাধান্যপূর্ণ রঙে পরিবর্তন করে, যেমন সাধারণত এটি নীল বা অন্য কোনো ব্রাইট কালারে রেন্ডার হয়।
3. Button with Borders:
আপনি যদি বর্ডার সহ বাটন চান, তাহলে pure-button ক্লাসের সাথে pure-button-primary বা pure-button-secondary ব্যবহার করতে পারেন।
<button class="pure-button pure-button-primary pure-button-bordered">Primary Bordered Button</button>
এটি সাধারণ বাটনের মতো, তবে বর্ডারের মাধ্যমে আরো দৃশ্যমান এবং স্টাইলিশ হয়ে থাকে।
4. Secondary Button:
Secondary বাটনটি সাধারণত সাধারণ বাটনের তুলনায় কিছুটা ডিমের এবং নরম দেখতে হয়।
<button class="pure-button pure-button-secondary">Secondary Button</button>
এটি সাধারণ বাটনের সাথে তুলনায় কম প্রাধান্য দেয়, তবে ব্যবহারকারীকে সিগনিফিকেন্ট বিকল্পের হিসেবে দেখাতে পারে।
5. Button with Active State:
Pure.CSS একটি active স্টেটও প্রদান করে, যা বাটনের উপর ক্লিক করলে এক ধরনের ইফেক্ট দেখায়। এটি বাটনের ডিজাইনে একটি অ্যাকশন ইফেক্ট যোগ করে।
<button class="pure-button pure-button-primary pure-button-active">Active Button</button>
6. Button with Disabled State:
Pure.CSS আপনাকে disabled স্টেটের বাটন তৈরি করার সুযোগও দেয়, যা সাধারণত ইনপুট ফর্মের জন্য ব্যবহৃত হয় যখন বাটনটি একটিভ থাকে না।
<button class="pure-button pure-button-disabled" disabled>Disabled Button</button>
এটি একটি নিষ্ক্রিয় বাটন তৈরি করবে যা ব্যবহারকারীরা ক্লিক করতে পারবেন না।
কাস্টমাইজেশন
যদিও Pure.CSS-এর ডিফল্ট বাটন স্টাইলস বেশ সুন্দর, তবে আপনি আপনার প্রয়োজন অনুসারে এগুলিকে কাস্টমাইজ করতে পারেন। Pure.CSS ক্লাসগুলির সাহায্যে বাটনের আকার, রঙ এবং অন্যান্য স্টাইলিং পরিবর্তন করা সম্ভব।
Customizing Button Example:
<style>
.custom-button {
background-color: #4CAF50; /* Green background */
color: white; /* White text */
border: 2px solid #4CAF50; /* Green border */
padding: 10px 20px; /* Padding */
text-align: center; /* Center text */
text-decoration: none; /* Remove underline */
display: inline-block; /* Align inline */
font-size: 16px; /* Font size */
border-radius: 5px; /* Rounded corners */
transition: background-color 0.3s ease; /* Smooth hover effect */
}
.custom-button:hover {
background-color: #45a049; /* Darker green on hover */
}
</style>
<button class="custom-button">Custom Green Button</button>
এখানে, একটি কাস্টম বাটন তৈরি করা হয়েছে, যা Pure.CSS এর সাধারণ বাটনের স্টাইল থেকে ভিন্ন। এটি একটি গোলাকার কোণ, প্যাডিং এবং স্মুথ হোভার ইফেক্ট প্রস্তাব করছে।
Pure.CSS এর ডিফল্ট বাটন স্টাইলগুলি অত্যন্ত সরল এবং সহজে ব্যবহারযোগ্য। এগুলোর মাধ্যমে আপনি মিনিমালিস্ট ওয়েব ডিজাইন তৈরি করতে পারেন। এই বাটনগুলো হালকা এবং দ্রুত লোড হয়, যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও দ্রুত এবং দক্ষ করে তোলে। যদি আপনি আরও কাস্টমাইজেশন চান, তাহলে Pure.CSS এর স্টাইলের সাথে নিজের স্টাইল যোগ করতে পারেন।
Read more
