🔘
CSS 버튼 마스터하기
HTML 버튼을 아름답게 스타일링하는 방법을 배워보세요. padding, border-radius, 색상, 그림자까지 단계별로 알려드립니다.
1기본 버튼 만들기
버튼은 웹에서 가장 많이 쓰이는 UI 요소입니다. HTML의 <button> 태그로 시작해서, CSS로 예쁘게 꾸며보겠습니다.
미리보기HTMLCSS
HTML
<button class="btn">Click Me</button>CSS
.btn {
padding: 12px 32px;
font-size: 16px;
border: none;
cursor: pointer;
font-family: 'Inter', sans-serif;
}border: none을 꼭 넣어주세요. 기본 버튼에는 브라우저 기본 테두리가 있습니다.
2padding으로 크기 조절
padding은 버튼 안쪽 여백입니다. 첫 번째 값은 위아래, 두 번째 값은 좌우입니다. 값을 바꿔가며 크기를 조절해보세요.
미리보기HTMLCSS
HTML
<button class="btn-sm">작은 버튼</button>
<button class="btn-md">중간 버튼</button>
<button class="btn-lg">큰 버튼</button>CSS
.btn-sm { padding: 6px 16px; font-size: 13px; border: none; cursor: pointer; }
.btn-md { padding: 12px 32px; font-size: 16px; border: none; cursor: pointer; }
.btn-lg { padding: 16px 48px; font-size: 18px; border: none; cursor: pointer; }padding: 12px 32px은 세로 12px, 가로 32px이라는 뜻입니다.
3border-radius로 둥글게
border-radius는 모서리를 둥글게 만듭니다. 값이 클수록 더 둥글어지고, 50% 이상이면 완전한 원이 됩니다.
미리보기HTMLCSS
HTML
<button class="btn-square">네모</button>
<button class="btn-rounded">둥근</button>
<button class="btn-pill">알약</button>CSS
.btn-square { padding: 12px 32px; border: none; border-radius: 0; cursor: pointer; }
.btn-rounded { padding: 12px 32px; border: none; border-radius: 8px; cursor: pointer; }
.btn-pill { padding: 12px 32px; border: none; border-radius: 9999px; cursor: pointer; }border-radius: 9999px를 사용하면 항상 완벽한 알약 모양이 됩니다.
4색상과 호버 효과
background-color로 배경색, color로 글자색을 지정합니다. :hover 가상 클래스를 사용하면 마우스를 올렸을 때 스타일을 바꿀 수 있습니다.
미리보기HTMLCSS
HTML
<button class="btn-primary">Primary</button>CSS
.btn-primary {
padding: 12px 32px;
border: none;
border-radius: 8px;
background-color: #0066ff;
color: white;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s;
}
.btn-primary:hover {
background-color: #0052cc;
}transition을 추가하면 색상이 부드럽게 변합니다. 항상 transition을 넣는 습관을 들이세요.
5box-shadow로 입체감
box-shadow는 그림자를 추가합니다. 순서: 가로 세로 블러 퍼짐 색상. 여러 그림자를 쉼표로 겹칠 수도 있습니다.
미리보기HTMLCSS
HTML
<button class="btn-shadow">그림자 버튼</button>CSS
.btn-shadow {
padding: 14px 36px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
transition: all 0.2s;
}
.btn-shadow:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}hover에서 translateY(-2px)을 넣으면 버튼이 살짝 떠오르는 효과를 줍니다.