উদাহরণ
নিচের কোডটি CSS ব্যবহার করে একটি ভার্টিক্যাল বাটন গ্রুপ তৈরি করার উদাহরণ:
<!DOCTYPE html> <html> <style> *,*::before,*::after{ box-sizing: border-box; } .btnGroup{ display: inline-block; font-size: 0; border: 2px solid darkgreen; box-shadow: 5px 10px 18px rgb(55, 173, 39); } button{ display: block; width: 100%; margin:0px; border:none; padding: 15px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; font-size: 20px; } button:not(:last-child){ border-bottom: 2px solid rgb(6, 134, 49); } button:hover{ background:rgb(48, 24, 134); box-shadow: 5px 10px 18px rgb(41, 39, 173); color:white; } </style> <body> <h1>Button Group</h1> <div class="btnGroup"> <button>Facebook</button> <button>Twitter</button> <button>LinkedIn</button> </div> <h2>Hover over the above button group to see hover effects</h2> </body> </html>
আউটপুট
উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:
বাটনগুলির উপরে হোভার করলে:
