CSS 버튼 생성기 가이드
버튼은 모든 페이지에서 가장 많이 클릭되는 요소입니다 — 가입, 구매, 다운로드를 모두 담당합니다. 6가지 스타일(그라디언트, 아웃라인, 3D, 알약, 글로우, 샤인)과 실제 호버 상태, 사용자 지정 색상·모서리·패딩을 제공합니다.
스타일 프리셋을 고르고 색상과 슬라이더를 조절한 뒤 CSS를 복사하세요. <style> 블록에 붙여넣고 버튼 요소에 class="btn"을 추가하면 호버 효과도 자동 적용됩니다.
Pro Tips
- 버튼 색상을 CTA 악센트 색상과 맞추고, 텍스트 대비를 최소 4.5:1(WCAG AA)로 유지해 가독성을 확보하세요.
- 항상 눈에 보이는 호버 상태를 추가하세요 — 살짝 떠오르거나 그림자가 생기면 클릭 가능함이 전달되어 전환율이 올라갑니다.
Frequently Asked Questions
Q: 사이트에 버튼을 추가하려면?
사이트에 버튼을 추가하려면? 생성된 CSS를 <style> 블록에 복사하고 HTML에서 <button class="btn">라벨</button>을 사용하세요.
Q: 그라디언트 버튼이 단색으로 보이는 이유는?
그라디언트 버튼이 단색으로 보이는 이유는? 그라디언트는 시작색과 끝색이 모두 필요합니다 — 두 색상 선택기가 모두 설정됐는지, background가 다른 규칙으로 덮이지 않았는지 확인하세요.
Q: 호버 효과를 바꿀 수 있나요?
호버 효과를 바꿀 수 있나요? 네 — .btn:hover 블록은 별도이므로 transform, 그림자, 배경 줄을 자유롭게 편집하거나 삭제할 수 있습니다.
Q: 이 버튼들은 접근성이 있나요?
이 버튼들은 접근성이 있나요? 네. 읽기 쉬운 대비를 사용하고 :focus-visible { outline: 2px solid; outline-offset: 2px; }을 추가해 키보드 사용자가 포커스를 볼 수 있게 하세요.
Q: 상업 프로젝트에 사용할 수 있나요?
상업 프로젝트에 사용할 수 있나요? 물론입니다 — 생성된 CSS는 독창적이며 개인 및 클라이언트 작업에 무료로 사용할 수 있습니다.
한국 전통색·오방색
오방색은 한국 전통 색채 체계로, 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 가지 기본색이 방위와 계절을 상징합니다. 단청과 한복, 오방장두루마기에 사용되며, 현대 디자인에서도 전통미를 살리는 배색으로 활용됩니다.
청색 #3B5BA5동쪽과 봄을 상징하는 오방색의 파랑
적색 #C12127남쪽과 여름을 상징하는 강렬한 빨강
황색 #EAC102중앙과 대지를 상징하는 노랑
백색 #F5F5F5서쪽과 가을을 상징하는 순백
흑색 #17191C북쪽과 겨울을 상징하는 깊은 검정
쪽빛 #0067A3쪽풀로 물들인 전통 남색. 청바지의 원조
연두색 #81C147새싹의 연한 초록. 단청에 자주 쓰임
살구색 #F7CE68살구 열매를 닮은 부드러운 노란빛
자주색 #583B7E고귀함을 상징하는 전통 보라
단청색 #2E8B8B궁궐과 사찰 단청의 청록색
Q: 오방색이란 무엇인가요?
오방색이란 무엇인가요? 오방색은 한국 전통 색채 체계로 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 색이 방위와 계절을 상징합니다. 단청, 한복, 오방장두루마기에 사용됩니다.
Q: 단청에 쓰이는 색은 무엇인가요?
단청에 쓰이는 색은 무엇인가요? 단청은 궁궐과 사찰의 목조건축을 장식하는 채색 기법으로, 오방색을 기본으로 청록색(#2E8B8B)과 연두색(#81C147) 등을 조화롭게 사용합니다.