다음은 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>Notification Button Example</h1> <a href="#" class="notificationContainer"> <span>Messages</span> <span class="notificationBadge">99+</span> </a> </body> </html>
출력
위의 코드는 다음과 같은 출력을 생성합니다 -
메시지 버튼 위로 마우스를 가져가면 색상이 다음과 같이 변경됩니다. -