어떻게 만들까요: 경고 버튼

경고 버튼 스타일을 어떻게 설계할까요

第一步 - HTML 추가:

<button class="btn success">성공</button>
<button class="btn info">정보</button>
<button class="btn warning">경고</button>
<button class="btn danger">위험</button>
<button class="btn default">기본</button>

第二步 - CSS 추가:

.btn {
  border: none; /* 테두리 제거 */
  color: white; /* 텍스트 색상 추가 */
  padding: 14px 28px; /* 내쪽 여백 추가 */
  cursor: pointer; /* 마우스 오버 시 포인터 커서 추가 */
}
.success {background-color: #04AA6D;} /*緑色 */
.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;}

직접 시도해보세요

관련 페이지

강의:CSS 버튼