สร้าง Navigation Menu แบบ Pill/Rounded Buttons ใช้ border-radius: 5px (หรือ 50px สำหรับ Fully Rounded) ทำให้ลิงก์ดูเหมือนปุ่มแคปซูล
ตัวอย่างโค้ด
<!DOCTYPE html> <html lang="en"> <head> <title>Document </title> <style> nav{ width: 100%; background-color: rgb(255, 251, 251); overflow: auto; height: auto; } .links { display: inline-block; text-align: center; padding: 14px; text-decoration: none; font-size: 17px; border-radius: 5px; color:black; } .links:hover { background-color: rgba(129, 129, 129, 0.473); } .selected{ background-color: rgb(33, 126, 255); color: rgb(255, 255, 255); } </style> </head> <body> <h1> Pill navigation example </h1> <nav> <a class="links selected" href="#">Home</a> <a class="links" href="#"> Login</a> <a class="links" href="#"> Register</a> <a class="links" href="#">Contact Us</a> <a class="links" href="#">More Info</a> </nav> </body> </html>
จุดสำคัญ
- background-color: white-ish - Navbar พื้นหลังสีขาว/เทาอ่อน
- .links { border-radius: 5px; } - มุมโค้งมน 5px (Pill Shape)
- display: inline-block - เรียงแนวนอน มี padding 14px
- .selected { background: blue; color: white; } - Active State สีน้ำเงิน ขาว
- Hover: rgba(129,129,129,0.473) - เทาโปร่งแสง
แนะนำ: Fully Rounded (Capsule)
.links { border-radius: 50px; /* หรือ 9999px */ }
ทำให้ทั้งสองข้างโค้งมนเต็มที่ คล้าย Capsule/Pill จริงๆ
ผลลัพธ์
Navbar สีขาว 5 ปุ่มมุมมน Home (สีน้ำเงิน) Login Register Contact More Info (สีดำ) Hover เทาโปร่ง
