CSS 버튼 생성기
패딩, 글꼴, 색상, 테두리, 둥근 모서리, 그림자, 전환 효과를 정해 CSS 버튼을 만듭니다. :hover, :active, :focus-visible CSS와 HTML, 명암비 검사까지 받습니다.
좋은 버튼에는 배경색 말고도 호버 상태, 눌림 상태, 눈에 띄는 키보드 포커스 링, 읽기 쉬운 글자, 부드러운 전환이 필요합니다. 이 생성기는 패딩, 글꼴, 색상, 테두리, 모서리, 그림자 설정만으로 이 모두를 만들어 주고, 색상(hue)이 흔들리지 않도록 OKLCH에서 배경을 어둡게 해서 호버와 눌림 색을 계산합니다. WCAG 기준으로 글자 명암비를 검사하고, 기본·호버·눌림·포커스 상태를 브라우저에서 나란히 보여 줍니다.
사용 방법
- 버튼 글자를 입력하고 패딩, 글자 크기, 두께를 정합니다.
- 배경색, 글자색, 테두리 색과 모서리 둥글기를 고릅니다.
- 호버 색은 자동으로 두거나 직접 고르고, 포커스 링과 전환 시간을 정합니다.
- CSS와 HTML을 복사하기 전에 명암비 줄을 확인하세요.
계산식
호버 = OKLCH(L − 0.08, C, H) · 눌림 = OKLCH(L − 0.12, C, H) · 명암비 = (L₁ + 0.05) ÷ (L₂ + 0.05)
OKLCH 명도는 0에서 1까지이므로 0.08은 8포인트입니다. 어둡게 만든 색이 sRGB를 벗어나면 CSS Color 4 색역 매핑 방식으로 채도를 줄입니다. 명암비는 WCAG 상대 휘도로 계산하며 반올림하지 않고 버립니다.
예시
기본 파랑 #2563EB의 OKLCH 명도는 0.546입니다. 8포인트 어둡게 하면 호버 색 #0B48CF, 12포인트 어둡게 하면 눌림 색 #003BC1이 됩니다. #2563EB 위의 흰색 글자는 명암비 5.16:1로, 일반 글자 기준 WCAG AA(4.5:1)는 통과하지만 AAA(7:1)는 통과하지 못합니다.
자주 묻는 질문
:focus 대신 왜 :focus-visible을 쓰나요?
:focus-visible은 키보드로 이동할 때만 윤곽선을 보여 주고 마우스로 클릭할 때는 보여 주지 않으므로, 마우스 사용자를 방해하지 않으면서 키보드 사용자에게 도움이 됩니다. 포커스 윤곽선을 다른 것으로 대체하지 않고 없애면 안 됩니다.
왜 HSL이 아니라 OKLCH로 어둡게 하나요?
HSL 명도는 지각 기준이 아니어서, 노랑과 파랑을 같은 HSL 값만큼 어둡게 하면 느낌이 크게 다릅니다. OKLCH 명도는 색상에 상관없이 단계가 고르게 보여서 호버 상태가 일관되게 느껴집니다.
prefers-reduced-motion을 추가해야 하나요?
네. 생성된 CSS는 시스템에서 동작 줄이기를 설정한 사람에게는 전환 효과를 끕니다. 접근성 설정을 존중하는 작은 배려입니다.
출처
최종 업데이트:
이 입력값이 담긴 페이지 주소: https://kakao.mobile/ko/tools/css-button-generator/
인용·퍼가기
kakaoCalc. (2026, November 8). CSS 버튼 생성기. https://kakao.mobile/ko/tools/css-button-generator/
“CSS 버튼 생성기.” kakaoCalc, 8 Nov. 2026, kakao.mobile/ko/tools/css-button-generator/.