![](https://maz.kr/wp-content/uploads/2024/06/howto-css-alert-buttons-thumbnail.png)
w3.css
경고 버튼
CSS를 사용하여 “경고” 버튼의 스타일을 지정하는 방법을 알아보자.
경고 버튼 스타일을 지정하는 방법
1단계) HTML 추가
<button class="btn success">Success</button> <button class="btn info">Info</button> <button class="btn warning">Warning</button> <button class="btn danger">Danger</button> <button class="btn default">Default</button>
2단계) CSS 추가
.btn { border: none; /* Remove borders */ color: white; /* Add a text color */ padding: 14px 28px; /* Add some padding */ cursor: pointer; /* Add a pointer cursor on mouse-over */ } .success {background-color: #04AA6D;} /* Green */ .success:hover {background-color: #46a049;} .info {background-color: #2196F3;} /* Blue */ .info:hover {background: #0b7dda;} .warning {background-color: #ff9800;} /* Orange */ .warning:hover {background: #e68a00;} .danger {background-color: #f44336;} /* Red */ .danger:hover {background: #da190b;} .default {background-color: #e7e7e7; color: black;} /* Gray */ .default:hover {background: #ddd;}
기본 예시
예제 보기참고
W3C School - How TO - Alert Buttons