CSS 버튼 생성기 (그라데이션·호버)

사용법

1. 버튼 텍스트 입력
2. 스타일 (단색·그라데이션·외곽선·고스트·뉴모피즘)
3. 크기 (Small~XL)
4. 색상·모서리·그림자·호버 효과 선택
5. CSS 복사

주요 기능

• 5가지 스타일 (단색·그라데이션·외곽선·고스트·뉴모피즘)
• 4가지 크기 (Small~XL)
• 5가지 호버 효과 (lift·scale·brightness·invert·none)
• 5가지 그림자 (none·sm·md·lg·glow)
• 실시간 미리보기 + CSS 복사

활용 예시

• 랜딩페이지 CTA — "지금 시작하기" 버튼
• 회원가입 폼 — Submit 버튼
• 이커머스 — "장바구니 담기"
• 마케팅 이메일 — 인라인 CSS 호환
• 대시보드 — 액션 버튼

CTA 버튼의 심리학

버튼은 사용자 행동을 유도하는 마지막 관문입니다. (1) 색: 빨강/주황은 긴급, 초록은 안전. (2) 크기: 작으면 무관심, 크면 거부감. 중요한 버튼은 본문보다 15~20% 크게. (3) 호버: 클릭 가능함을 즉시 알림. 들어올리기(lift) 효과가 가장 보편적. (4) 그림자: 입체감을 주어 클릭하고 싶게 만듭니다.

자주 묻는 질문