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


সিএসএস এর বিভিন্ন প্রোপার্টি যেমন - text-decoration, box-shadow,border ইত্যাদি ব্যাবহার করে কোন বাটনকে অনেক ভাবে ডিজাইন করা যায়। নিচে এর কিছু ব্যাবহারিক উদাহরন দেখুন।



সাধারন বাটন

নিচের উদাহরণে কিছু সিএসএস প্রোপার্টি ব্যাবহার করে একটি সাধারন বাটন তৈরি করা হয়েছে।

উদাহরণ

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

কোড এডিটর



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

সিএসএস এর font-sizepadding প্রপার্টি ব্যাবহার করে নিচে কিছু বাটনের স্টাইল কোড দেখুন।

উদাহরণ

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

কোড এডিটর



hovar এর ব্যবহার

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

উদাহরণ

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

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

কোড এডিটর



box-shadow প্রোপার্টি

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


ওপরের উদাহরণটির জন্য নিচের সিএসএস স্টাইল কোড গুলো ব্যাবহার করুন।

উদাহরণ

<style>
.box {
  background-color:#33CC99;
  font-size:1.5em;
  padding:0.5em 2em;
  color:#fff;
  border:none;
  box-shadow: 1px 2px 9px 5px #ddd;
  }
  
.box:hover { 
  border:none;
  box-shadow: 1px 2px 9px 5px #aaa;
  }
</style>

<button class="box">Hover Me</button>

কোড এডিটর



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

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

opacitycursor প্রপার্টি ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

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

কোড এডিটর



রিপল এফেক্ট

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

বাটনে রিপল এফেক্ট তৈরি করার জন্য সিএসএস এর position, margin, display, cursor, opacity ইত্যাদি প্রোপার্টি গুলো ব্যাবহার করা হয়েছে।


ওপরের মত একটি বাটন ডিজাইন করতে নিচে সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

.rip {
  position: relative;
  background-color: #6633FF; 
  border: none;  color: #FFFFFF;  
  font-size:1.5em;
  padding: 0.5em 2em;  
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;  
  overflow: hidden;  
  cursor: pointer;
  border-radius:2px;
  }
  
.rip:after {  
  content: "";  
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -42px !important;
  margin-top: -120%;
  opacity: 0.1;
  transition: all 1s;border-radius:2px;}

.rip:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s;
  }

কোড এডিটর