웹 페이지에서 사용자에게 상태나 메시지를 전달할 때 경고(Alert) 버튼은 매우 유용한 UI 요소입니다. CSS만으로도 성공(Success), 정보(Info), 경고(Warning), 위험(Danger), 기본(Default) 등 다양한 종류의 버튼을 손쉽게 만들 수 있습니다.
핵심은 버튼별로 클래스를 나누고, 각 클래스에 고유한 배경색을 지정한 뒤 :hover 선택자로 마우스 오버 시 색이 살짝 어두워지는 효과를 추가하는 것입니다.
CSS 경고 버튼 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button {
border: none;
color: white;
font-weight: bolder;
padding: 20px;
font-size: 18px;
cursor: pointer;
border-radius: 6px;
}
.Success {
background-color: #4caf50;
}
.Success:hover {
background-color: #46a049;
}
.Info {
background-color: #2196f3;
}
.Info:hover {
background: #0b7dda;
}
.Warning {
background-color: #ff9800;
}
.Warning:hover {
background: #e68a00;
}
.Danger {
background-color: #f44336;
}
.Danger:hover {
background: #da190b;
}
.Default {
background-color: #e7e7e7;
color: black;
}
.Default:hover {
background: #ddd;
}
</style>
</head>
<body>
<h1>Alert Buttons Example</h1>
<button class="Success">Success</button>
<button class="Info">Info</button>
<button class="Warning">Warning</button>
<button class="Danger">Danger</button>
<button class="Default">Default</button>
</body>
</html>코드 설명
- 공통 스타일: 모든 button 요소에 테두리 제거, 흰색 글자, 굵은 폰트, 넉넉한 패딩, 둥근 모서리(border-radius)와 포인터 커서를 적용해 일관된 형태를 만듭니다.
- .Success: 초록색(#4caf50) 계열로 작업 성공이나 완료 상태를 나타냅니다.
- .Info: 파란색(#2196f3) 계열로 안내나 참고 정보를 전달할 때 사용합니다.
- .Warning: 주황색(#ff9800) 계열로 주의가 필요한 상황을 알립니다.
- .Danger: 빨간색(#f44336) 계열로 삭제 등 위험한 동작에 사용합니다.
- .Default: 회색(#e7e7e7) 배경에 검은 글자를 적용해 중립적인 기본 버튼 역할을 합니다.
각 클래스에는 :hover 의사 클래스가 함께 정의되어 있어, 마우스를 올리면 배경색이 한 단계 어두운 색으로 바뀌며 자연스러운 인터랙션 효과를 제공합니다.
실행 결과
위 코드를 실행하면 다음과 같이 다섯 가지 색상의 경고 버튼이 화면에 표시됩니다.
마무리
이처럼 클래스 기반으로 버튼 스타일을 분리해 두면 재사용성이 높아지고, 프로젝트 전체에서 일관된 디자인 시스템을 유지하기 쉽습니다. 필요에 따라 그림자(box-shadow), 전환 애니메이션(transition) 등을 추가하면 더욱 세련된 버튼을 만들 수 있습니다.