สร้างกลุ่มปุ่มแนวตั้ง (Vertical Button Group) ที่ต่อกันไม่มีช่องว่าง ใช้ display: block และ border-bottom คั่นระหว่างปุ่ม
ตัวอย่างโค้ด
<!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>
เทคนิคสำคัญ
- .btnGroup { font-size: 0; } - กำจัดช่องว่างระหว่าง inline-block elements (white-space)
- button { display: block; width: 100%; } - ปุ่มเต็มความกว้าง เรียงแนวตั้ง
- button:not(:last-child) { border-bottom: ... } - เส้นคั่นระหว่างปุ่ม ไม่มีเส้นท้ายสุด
- box-shadow บน Container - เงารอบกลุ่มปุ่มทั้งหมด
Hover Effect
Hover ปุ่มใดปุ่มหนึ่ง -> เปลี่ยนพื้นหลังสีม่วง เขียนเงาเปลี่ยนสี ตัวอักษรขาว
ผลลัพธ์
กลุ่มปุ่ม 3 ปุ่ม (Facebook, Twitter, LinkedIn) ติดกันแนวตั้ง ขอบเขียวเข้ม Hover ปุ่ม -> สีม่วงเงาแก้วน้ำเงิน
