알약(Pill) 버튼은 양쪽 끝이 둥근 형태의 버튼으로, 웹 디자인에서 부드럽고 현대적인 느낌을 연출할 때 널리 사용됩니다. CSS만으로도 아주 간단하게 구현할 수 있으며, 핵심은 border-radius 속성입니다.
알약 버튼의 핵심 원리
버튼에 border-radius 속성을 적용하고, 버튼 높이의 절반 이상 되는 값(예: 32px 또는 999px)을 지정하면 좌우 끝이 완전히 둥글게 처리되어 알약 모양이 됩니다.
함께 사용하면 좋은 CSS 속성
- border-radius: 버튼 끝을 둥글게 만들어 알약 형태를 완성합니다.
- padding: 내부 여백을 조절해 버튼의 크기와 비율을 잡아줍니다.
- :hover: 마우스를 올렸을 때 배경색을 바꿔 자연스러운 인터랙션 효과를 줍니다.
예제 코드
다음은 CSS로 알약 버튼을 만드는 전체 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
background-color: rgb(193, 255, 236);
border: none;
color: rgb(0, 0, 0);
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
font-size: 30px;
border-radius: 32px;
}
button:hover {
background-color: #9affe1;
}
</style>
</head>
<body>
<h1>Pill Buttons Example</h1>
<button>Button 1</button>
<button>Button 2</button>
<div></div>
<button>Button 3</button>
<button>Button 4</button>
</body>
</html>코드 설명
위 코드에서 주목할 부분은 다음과 같습니다.
border-radius: 32px;— 버튼의 높이가 약 60px이므로, 이 값 덕분에 양쪽 끝이 반원 형태로 둥글어져 알약 모양이 됩니다.padding: 10px 20px;— 상하 10px, 좌우 20px의 여백으로 버튼 크기를 조절합니다.cursor: pointer;— 마우스 커서를 손가락 모양으로 변경해 클릭 가능한 요소임을 알려줍니다.button:hover { background-color: #9affe1; }— 마우스를 올리면 배경색이 살짝 진한 민트색으로 변하는 호버 효과를 추가했습니다.
실행 결과
위 코드를 실행하면 둥근 알약 모양의 버튼 4개가 화면에 표시되며, 마우스를 올리면 배경색이 부드럽게 변경됩니다.
