সিএসএস এর বিভিন্ন প্রোপার্টি যেমন - 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 প্রপার্টি ব্যাবহার করে নিচে কিছু বাটনের স্টাইল কোড দেখুন।
.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;}
বাটনে মাউস হোভার ইফেক্ট যুক্ত করতে সিএসএস এর hover সিলেক্টর ব্যবহার করা যায়। transition-duration প্রপার্টি ব্যবহার করে হোভার ইফেক্ট এর গতি বা speed নিয়ন্ত্রন করা যায়। নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে hover ও transition-duration ব্যাবহার করা হয়েছে।
.button { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } .button:hover { background-color: #4CAF50; /* Green */ color: white; }
সিএসএস এর 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 এর মত দেখানোর জন্য বাটনে opacity প্রোপার্টি ব্যবহার করা যায়। যখন বাটনের উপর মাউস হোভার হয় অর্থাৎ মাউস নিয়ে যাওয়া হয় তখন একটি "no parking sign" দেখানোর জন্য cursor প্রপার্টির মান not-allowed নির্ধারণ করা হয়েছে।
opacity ও cursor প্রপার্টি ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।
.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; }