X

X

X

CSS বাটন ডিজাইন


CSS দিয়ে ইচ্ছেমত বিভিন্নরকম বাটন তৈরি করা যায়।


বেসিক বাটন ডিজাইন


Code Example

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বাটন রং





background-color property ব্যবহার করে কোনো বাটনের ব্যাকগ্রাউন্ডের রং পরিবর্তন করা যায়।

Code Example

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Button Sizes


বাটনের ফন্ট সাইজ পরিবর্তন করার জন্য font-size প্রপার্টি ব্যবহার করতে হয়:

Code Example

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

padding property ব্যবহার করে কোনো বাটনরে প্যাডিংয়ের মান পরিবর্তন করতে হয়:


Code Example

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Rounded Buttons


Rounded Button তৈরি করার জন্য border-radius property ব্যবহার করতে হবে। এটি ব্যবহার করে বৃত্তাকার কোণ তৈরি করা যায়:

Code Example

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


রঙিন Button Border

বাটনরে বর্ডারের রং সেট করার জন্য border property ব্যবহার করতে হবে:

Code Example

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Hoverable Buttons


কোনো বাটনের উপর হোভার ইফেক্ট প্রয়োগ করার জন্য :hover selector ব্যবহার করে এতে স্টাইল প্রয়োজ করতে হবে। ইচ্ছেমত যেকোনো স্টাইল প্রয়োগ করতে পারবেন।

টিপস: ট্রানজিশন সময় নির্ধারণ করার জন্য transition-duration property ব্যবহার করবেন:

Code Example

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ছায়াযুক্ত বাটন (Shadow Button)

কোনো বাটনের ছায়া তৈরি করার জন্য box-shadow property ব্যবহার করতে হবে:

Code Example

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Disabled Buttons

কোনো বাটনকে ডিজেবল লুক দেওয়ার জন্য opacity property ব্যবহার করবেন।

টিপস: “প্রযোজ্য নয়” নির্দেশনা দেওয়ার জন্য cursor property ব্যবহার করে “not-allowed” cursor সেট করতে পারেন:

Code Example

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Button -এর প্রস্থ


স্বাভাবিক অবস্থায় কোনো বাটনরে প্রস্থ তার কন্টেন্টের পরিমানের উপর নির্ভর করে। তবে আপনি চাইলে width property ব্যবহার করে ইচ্ছেমত বাটনের প্রস্থ বা দৈর্ঘ্য সেট করতে পারবেন। এক্ষেত্রে লক্ষ্য রাখবেন প্রস্থ যেনো কন্টেন্টের প্রস্থের চেয়ে কম না হয়:

Code Example

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Button Group

বাটন গ্রুপ তৈরি করার জন্য বাটন মার্জনি বাদ দিত হবে এবং উক্ত গ্রুপের প্রতিটি বাটনেরে float:left মান সেট করতে হবে:

Code Example

.btn-group .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    float: left;
}

.btn-group .button:hover {
    background-color: #3e8e41;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বর্ডারযুক্ত Button Group

বাটনগ্রুপের বর্ডারের border property এর মান সেট করতে হবে। ইচ্ছেমত বর্ডারের প্রস্থের মান সেট করতে পারবেন:

Code Example

.btn-group .button {
    background-color: #4CAF50; /* Green */
    border: 1px solid green;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    float: left;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উল্লম্বিক বাটন গ্রুপ (Vertical Button Groups)

float:left এর পরিবর্তে display:block প্রপার্টি ব্যবহার করতে হবে। তাহলে প্রতিটি বাটন একটির পর আরেকটি উপর থেকে নিচের দিকে প্রদর্শিত হবে:

Code Example

.btn-group .button {
    background-color: #4CAF50; /* Green */
    border: 1px solid green;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    width: 150px;
    display: block;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Animated Buttons

উদাহরণ

মাউস হোভার করার পর কার্সর পরিবর্তন:

নিজে নিজে চেষ্টা করুন »

উদাহরণ

ক্লিকড করার সাথে সাথে “pressed” effect যুক্ত করন:

নিজে নিজে চেষ্টা করুন »

উদাহরণ

ক্লিক করার সাথে সাথে “ripple” effect যুক্ত করুন:

নিজে নিজে চেষ্টা করুন »