![](https://maz.kr/wp-content/uploads/2024/06/howto-css-pill-button-thumbnail.png)
w3.css
알약 버튼
CSS를 사용하여 알약형 버튼을 만드는 방법을 알아보자.
알약 버튼을 만드는 방법
1단계) HTML 추가
<button class="button">Pill Button</button>
2단계) CSS 추가
다음 border-radius 속성을 사용하여 버튼에 둥근 모서리를 추가한다.
.button { background-color: #ddd; border: none; color: black; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; border-radius: 16px; }
기본 예시
예제 보기참고
W3C School - How TO - Pill Buttons