นี่คือโค้ดสำหรับการสร้างปุ่มแจ้งเตือนพร้อม Badge แสดงจำนวนด้วย CSS
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ font-family: monospace,serif,sans-serif; } .notificationContainer { margin: 20px; background-color: rgb(254, 255, 171); color: black; text-decoration: none; padding: 15px 26px; font-size: 32px; position: relative; display: inline-block; border-radius: 2px; border:2px solid black; } .notificationContainer:hover { background: rgb(43, 8, 138); color:white; } .notificationContainer .notificationBadge { position: absolute; top: -10px; right: -10px; padding: 5px 10px; border-radius: 50%; background-color: rgb(0, 170, 51); color: white; } </style> </head> <body> <h1>ตัวอย่างปุ่มแจ้งเตือน</h1> <a href="#" class="notificationContainer"> <span>Messages</span> <span class="notificationBadge">99+</span> </a> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
เมื่อวางเมาส์เหนือปุ่ม Messages สีจะเปลี่ยนดังนี้ −
