সিএসএস৩ বাটন - Css3 Button



সিএসএস ৩ দ্বারা একটি বাটনকে অনেক ভাবে ডিজাইন করা যায়। এই অধ্যায়ে কিভাবে সিএসএস ব্যবহার করে বাটন ডিজাইন করা যায় তা দেখানো হল।


বেসিক বাটন

নিচে সিএসএস ব্যবহার করে একটি বাটন এর উদাহরণ দেখুন।

উদাহরণ

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




background-color প্রপার্টি

বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে background-color প্রপার্টি ব্যবহার করা যায়। নিচে উদাহরণ দেখুন।

উদাহরণ

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




font-size ও padding প্রপার্টি

বাটনের ফন্ট সাইজ পরিবর্তন করতে font-size প্রোপার্টি ব্যবহার করা যায়। নিচে কিছু উদাহরণ দেখুন।

উদাহরণ

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


padding প্রোপার্টি ব্যবহার করে বাটনকে আরও আকর্ষণীয় করা যায়। নিচে উদাহরণ দেখুন।

উদাহরণ

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




border-radius প্রোপার্টি

বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করা যায়। নিচে উদাহরণ দেখুন।

উদাহরণ

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




border প্রপার্টি

border প্রপার্টি ব্যবহার করে বাটনের বর্ডার এ বিভিন্ন রঙ দেয়া যায়। নিচে উদাহরণ দেখুন।

উদাহরণ

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




hovar এর ব্যবহার

বাটনে হোভার ইফেক্ট যুক্ত করতে hover সিলেক্টর ব্যবহার করা যায়।
transition-duration প্রপার্টি ব্যবহার করে হোভার ইফেক্ট এর গতি বা speed নিয়ন্ত্রন করা যায়। নিচে উদাহরণ দেখুন।

উদাহরণ

.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}




Shadow ইফেক্ট

বাটনে Shadow বা ছায়ার ইফেক্ট যুক্ত করার জন্য box-shadow প্রোপার্টি ব্যবহার করা যায়। নিচে এর উদাহরণ দেখুন।

উদাহরণ

.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);
}




নিস্ক্রিও বা Disable বাটন

কোন বাটনকে ডিজেবল এর মত দেখানোর জন্য বাটনে opacity প্রোপার্টি ব্যবহার করতে হয়। যখন বাটনের উপর মাউস নিয়ে যাওয়া হবে তখন একটি "no parking sign" দেখানোর জন্য cursor প্রপার্টির মান not-allowed নির্ধারণ করা হয়েছে।

উদাহরণ

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




বাটনের প্রস্থ

ডিফল্ট ভাবে কোন বাটনের সাইজ এর ভিতর অবস্থিত টেক্সটের সাইজের উপর নির্ভর করে। একটি বাটনের সাইজ পরিবর্তন করতে width প্রোপার্টি ব্যবহার করা যায়। নিচে এর উদাহরণ দেখুন।

উদাহরণ

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


নোট - বাটনের প্রশস্ততা যদি স্থায়ীভাবে নির্ধারণ করতে হয় তবে পিক্সেল ব্যবহার করতে হবে এবং বাটনকে রেস্পন্সিভ করার জন্য পার্সেন্টিজ (%) ব্যবহার করতে হবে।


এনিমেটেড বাটন

কোন বাটনে বিভিন্ন ধরনের এনিমেশন যুক্ত করা যায়। নিচে একটি উদাহরণ দেখুন যেখানে বাটনে ভেতর হোভার ইফেক্টে একটি এরো বা arrow চিহ্ন যুক্ত হবে।

উদাহরণ

<head>
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
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: '\00bb';
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>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>



নিচে একটি উদাহরণ দেখুন, যেখানে একটি বাটনে রিপল বা ripple ইফেক্ট যুক্ত করা হয়েছে।

উদাহরণ

<head>
<style>
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

.button:after {
content: "";
background: #f1f1f1;
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>
<button class="button"<Click Me</button>
</body>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.