সিএসএস(৩) বাটন
সিএসএস(৩) দ্বারা আপনি একটি বাটনে আপনার পছন্দমত স্টাইল করতে পারেন। আমরা এই অধ্যায়ে দেখবো কিভাবে সিএসএস ব্যবহার করে বাটনের স্টাইল করা যায়।
বেসিক বাটন স্টাইল
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>সিএসএস বাটন</h2>
<button>ডিফল্ট বাটন</button>
<a href="#" class="button">লিংক বাটন</a>
<button class="button">বাটন</button>
<input type="button" class="button" value="ইনপুট বাটন">
</body>
</html>
ফলাফল
বাটনের কালার
বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে background-color প্রোপারটি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #4CAF50;} /* Green */
.button3 {background-color: #008CBA;} /* Blue */
.button4 {background-color: #f44336;} /* Red */
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>
<h2>সিএসএস বাটন</h2>
<p> background-color প্রোপার্টির মাধ্যমে বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়।</p>
<button class="button">টিল</button>
<button class="button button2">সবুজ</button>
<button class="button button3">নীল</button>
<button class="button button4">লাল</button>
<button class="button button5">কালো</button>
</body>
</html>
ফলাফল
বাটনের সাইজ
বাটনের ফন্ট সাইজ পরিবর্তন করতে font-size প্রোপার্টি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>বাটন সাইজ</h2>
<p> font-size প্রোপার্টি ব্যবহারের মাধ্যমে বাটনের ফন্ট সাইজ পরিবর্তন করা হয়।</p>
<button class="button button1">১০ পিক্সেল</button>
<button class="button button2">১২ পিক্সেল</button>
<button class="button button3">১৬ পিক্সেল</button>
<button class="button button4">২০ পিক্সেল</button>
<button class="button button5">২৪ পিক্সেল</button>
</body>
</html>
ফলাফল
বাটনের পেডিং পরিবর্তন করতে padding প্রোপার্টি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 16px;}
.button5 {padding: 32px 16px;}
</style>
</head>
<body>
<h2>বাটন সাইজ</h2>
<p>padding প্রোপার্টির মাধ্যমে বাটনের পেডিং পরিবর্তন করা হয়।</p>
<button class="button button1">১০ পিক্সেল ২৪ পিক্সেল</button>
<button class="button button2">১২ পিক্সেল ২৮ পিক্সেল</button>
<button class="button button3">১৪ পিক্সেল ৪০ পিক্সেল</button>
<button class="button button4">১৬ পিক্সেল</button>
<button class="button button5">৩২ পিক্সেল ১৬ পিক্সেল</button>
</body>
</html>
ফলাফল
গোলাকৃতি বাটন
বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>গোলাকৃতি বাটন</h2>
<p>বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করা হয়েছে।</p>
<button class="button button1">২ পিক্সেল</button>
<button class="button button2">৪ পিক্সেল</button>
<button class="button button3">৮ পিক্সেল</button>
<button class="button button4">১২ পিক্সেল</button>
<button class="button button5">৫০%</button>
</body>
</html>
ফলাফল
বাটনের বর্ডার কালার
বাটনে বর্ডার কালার যুক্ত করতে border প্রোপার্টি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 3px solid teal;
}
.button2 {
background-color: white;
color: black;
border: 3px solid #4CAF50;
}
.button3 {
background-color: white;
color: black;
border: 3px solid #008CBA;
}
.button4 {
background-color: white;
color: black;
border: 3px solid #f44336;
}
.button5 {
background-color: white;
color: black;
border: 3px solid #555555;
}
</style>
</head>
<body>
<h2>কালার বাটন বর্ডার</h2>
<p>বাটনে বর্ডার যুক্ত করার জন্য border প্রোপার্টি ব্যবহার করাহয়েছে।</p>
<button class="button button1">টিল</button>
<button class="button button2">সবুজ</button>
<button class="button button3">নীল</button>
<button class="button button4">লাল</button>
<button class="button button5">কালো</button>
</body>
</html>
ফলাফল
বাটন হোভার
আপনি বাটনে হোবার ইফেক্ট যুক্ত করতে hover সিলেক্টর ব্যবহার করুন।
পরামর্শঃ হোভার এর গতি নিয়ন্ত্রন করার জন্য transition-duration প্রোপার্টি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid teal;
}
.button1:hover {
background-color: teal;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button2:hover {
background-color: #4CAF50;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button3:hover {
background-color: #008CBA;
color: white;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button4:hover {background-color: #f44336;}
.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>হোভারেবল বাটন</h2>
<p>মাউস নড়াচড়া করানোর সাথে সাথে বাটনের স্টাইল পরিবর্তনের জন্য hover selector ব্যবহার করা হয়েছে।</p>
<p><strong>টিপস:</strong>"hover" এর দ্রুত প্রতিক্রিয়া নির্ধারণ করার জন্য transition-duration প্রোপার্টি ব্যবহার করা হয়েছে।</p>
<button class="button button1">টিল</button>
<button class="button button2">সবুজ</button>
<button class="button button3">নীল</button>
<button class="button button4">লাল</button>
<button class="button button5">কালো</button>
</body>
</html>
ফলাফল
বাটন শ্যাডো
বাটনে শ্যাডো যুক্ত করার জন্য box-shadowপ্রোপার্টি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid teal;
}
.button1:hover {
background-color: teal;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button2:hover {
background-color: #4CAF50;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button3:hover {
background-color: #008CBA;
color: white;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button4:hover {background-color: #f44336;}
.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>স্যাডো বাটন</h2>
<p>বাটনকে স্যাডো করার জন্য box-shadow প্রোপের্টি ব্যবহার কর হয়েছে।</p>
<button class="button button1">স্যাডো বাটন</button>
<button class="button button2">হোভারের উপর শ্যাডো</button>
</body>
</html>
ফলাফল
ডিজেবল(Disable) বাটন
একটি বাটনকে ডিজেবল এর মত দেখানোর জন্য বাটনে opacity প্রোপার্টি ব্যবহার করুন।
পরামর্শঃ যখন আপনি বাটনের উপর মাউস নিয়ে যাবেন তখন একটি "no parking sign" দেখানোর জন্য cursor প্রোপার্টি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
</head>
<body>
<h2>ডিজেবল বাটন</h2>
<p>opacity প্রোপার্টি ব্যবহারের মাধ্যমে বাটনে কিছু টান্সপারেন্সি যুক্ত করা হয় (এটা বাঁটনকে ডিজেবল বানায়)</p>
<button class="button button1">সাধারণ বাটন</button>
<button class="button button2">ডিজেবল বাটন</button>
</body>
</html>
ফলাফল
বাটনের প্রস্থ
ডিফল্ট ভাবে একটি বাটনের সাইজ এর ভিতর অবস্থিত টেক্সটের সাইজের উপর নির্ভর করে। একটি বাটনের সাইজ পরিবর্তন করতে width প্রোপার্টি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {width: 200px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
</style>
</head>
<body>
<h2>বাটনের প্রশস্ততা</h2>
<p<width প্রোপার্টি ব্যবহারের মাধ্যমে বাটনের প্রশস্ততা পরিবর্তন করা হয়।</p<
<p><strong<টিপস:</strong<আপনি যদি বাটনের প্রশস্ততা স্থায়ীভাবে দিতে চান
তবে পিক্সেল ব্যবহার করতে হবে এবং বাটনকে রেস্পন্সিভ করার জন্য পার্সেন্টিজ (%) ব্যবহার করতে হবে।
এখন এর প্রতিক্রিয়া দেখার জন্য ব্রাউজারের উইন্ডোকে রিসাইজ করুন।</p>
<button class="button button1">২০০ পিক্সেল</button>
<button class="button button2">৫০%</button>
<button class="button button3">১০০%</button>
</body>
</html>
ফলাফল
বাটন গ্রুপ
বাটন গুলো থেকে মার্জিন বাদ দিয়ে float:left প্রোপার্টি যুক্ত করে বাটনের গ্রুপ তৈরি করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {
background-color: orangered;
}
</style>
</head>
<body>
<h2>বাটন গ্রুপ</h2>
<p<বাটনের মার্জিন এবং ফ্লোট দূর করার জন্য বাটন গ্রুপ তৈরি করা হয়।</p<
<button class="button button1">২০০ পিক্সেল</button>
<button class="button button2">৫০%</button>
<button class="button button3">১০০%</button>
<p style="clear:both">>br<ফ্লোটগুলো বাদ দেওয়ার পর p এলিমেন্টের ফ্লোটগুলোও পরবর্তী বাটনে চলে যায়।</p>
</body>
</html>
ফলাফল
বর্ডার সহ বাটন গ্রুপ
বর্ডার সহ বাটন গ্রুপ তৈরি করতে বাটন গ্রুপের সাথে border প্রোপার্টি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color:teal;
border: 1px solid purple;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
.button:hover {
background-color: orangered;
}
</style>
</head>
<body>
<h2>বর্ডারসহ বাটন গ্রুপ</h2>
<p<বর্ডারসহ বাটন গ্রুপ তৈরি করার জন্য বর্ডার যুক্ত করা হয়।</p<
<button class="button"<বাটন ১</button<
<button class="button"<বাটন ২</button<
<button class="button"<বাটন ৩</button<
<button class="button"<বাটন ৪</button<
<p style="clear:both">>br<ফ্লোটগুলো বাদ দেওয়ার পর p এলিমেন্টের ফ্লোটগুলোও পরবর্তী বাটনে চলে যায়।</p>
</body>
</html>
ফলাফল
এনিমেটেড বাটন
একটি বাটনে আপনি বিভিন্ন ধরনের এনিমেশন যুক্ত করতে পারবেন। তার মধ্যে আমরা নিম্নের বাটনের ভিতর হোবার ইফেক্টে এরো (arrow ) চিহ্ন যুক্ত করবোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: teal;
border: none;
color: whitesmoke;
text-align: center;
font-size: 25px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>অ্যারো ইফেক্ট</h2>
<button class="button" style="vertical-align:middle"><span>মাউস আনুন</span></button>
</body>
</html>
ফলাফল
এই উদাহরনে আমরা বাটন ক্লিকে একটি রিপল("ripple") ইফেক্ট যুক্ত করবোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
position: relative;
background-color: teal;
border: none;
font-size: 28px;
color: whitesmoke;
padding: 20px;
width: 300px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: orangered;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
</head>
<body>
<h2>রিপল (Ripple) ইফেক্ট</h2>
<button class="button"><span>বাটনে ক্লিক করুন</span></button>
</body>
</html>
ফলাফল
উদাহরণ
এই উদাহরনে আমরা বাটন ক্লিকে একটি প্রেস("pressed") ইফেক্ট যুক্ত করবোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: whitesmoke;
background-color: teal;
border: none;
border-radius: 15px;
box-shadow: 0 9px lightgrey;
}
.button:hover {background-color: teal}
.button:active {
background-color: orangered;
box-shadow: 0 5px grey;
transform: translateY(4px);
}
</style>
</head>
<body>
<h2>প্রেসড (Pressed) ইফেক্ট</h2>
<button class="button"><span>বাটনে ক্লিক করুন</span></button>
</body>
</html>
ফলাফল