![](https://maz.kr/wp-content/uploads/2024/06/howto-css-outline-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: 2px solid black; background-color: white; color: black; padding: 14px 28px; font-size: 16px; cursor: pointer; } /* Green */ .success { border-color: #04AA6D; color: green; } .success:hover { background-color: #04AA6D; color: white; } /* Blue */ .info { border-color: #2196F3; color: dodgerblue } .info:hover { background: #2196F3; color: white; } /* Orange */ .warning { border-color: #ff9800; color: orange; } .warning:hover { background: #ff9800; color: white; } /* Red */ .danger { border-color: #f44336; color: red } .danger:hover { background: #f44336; color: white; } /* Gray */ .default { border-color: #e7e7e7; color: black; } .default:hover { background: #e7e7e7; }
기본 예시
예제 보기
둥근 윤곽선 버튼을 생성하려면 다음 border-radius 속성을 추가하자.
.btn { border-radius: 5px; }
기본 예시
예제 보기참고
W3C School - How TO - Outline Buttons