어떻게 만들지: 알림 버튼

CSS를 사용하여 알림 버튼을 만들어보세요.

Inbox 3

알림 버튼을 어떻게 만드는가

第一步 - HTML 추가:

<a href="#" class="notification">
  <span>Inbox</span>
  <span class="badge">3</span>
</a>

第二步 - CSS 추가:

.notification {
  background-color: #555;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
{}
.notification:hover {
  배경: 빨간색;
{}
.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  배경: 빨간색;
  color: white;
{}

직접 시도해 보세요

관련 페이지

강의:CSS 버튼