![](https://maz.kr/wp-content/uploads/2024/06/howto-css-notification-button-thumbnail.png)
w3.css
알림 버튼
CSS로 알림 버튼을 만드는 방법을 알아보자.
알림 버튼을 만드는 방법
1단계) HTML 추가
<a href="#" class="notification"> <span>Inbox</span> <span class="badge">3</span> </a>
2단계) CSS 추가
.notification { background-color: #555; color: white; text-decoration: none; padding: 15px 26px; position: relative; display: inline-block; border-radius: 2px; } .notification:hover { background: red; } .notification .badge { position: absolute; top: -10px; right: -10px; padding: 5px 10px; border-radius: 50%; background: red; color: white; }
기본 예시
예제 보기참고
W3C School - How TO - Notification Buttons