기본, 보조, 악센트, 고스트, 윤곽선 및 소프트 변형이 포함된 CSS 전용 Tailwind CSS 버튼입니다. 크기는 xs-xl, 로드 상태, 비활성화 및 아이콘 버튼입니다. CSS 전용 WCAG AA는 Django, HTMX, Laravel, React에서 작동합니다.
버튼 구성 요소는 작업을 실행하거나 사용자를 새 페이지로 이동하는 대화형 요소입니다. Frutjam 버튼 시스템은 수정자 클래스를 통해 다양한 크기, 색상 및 스타일을 제공합니다. 모두 프레임워크와 프로젝트 전반에서 원활하게 작동하는 가볍고 사용자 정의가 가능한 버튼을 위한 Tailwind CSS 유틸리티 우선 접근 방식으로 구축되었습니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| btn | 베이스 | 스타일이 지정된 버튼 요소 |
| btn-outline | 스타일 | 색상 테두리가 있는 투명 채우기 |
| btn-soft | 스타일 | 음소거된 색조 배경 |
| btn-ghost | 스타일 | 호버에서만 보이는 미묘한 배경 |
| btn-dashed | 스타일 | 점선 테두리 스타일 |
| btn-plain | 스타일 | 배경이나 테두리가 없고 텍스트만 있음 |
| btn-link | 스타일 | 텍스트 하이퍼링크 스타일 |
| btn-pill | 스타일 | 완전히 둥근 알약 모양 |
| btn-rounded | 스타일 | 적당한 반올림 |
| btn-circle | 스타일 | 아이콘 버튼의 너비가 같은 원 |
| btn-square | 스타일 | 둥글림이 없는 정사각형 모양 |
| btn-block | 수정자 | 전체 너비 차단 버튼 |
| btn-wide | 수정자 | 추가 수평 패딩으로 기본값보다 넓음 |
| btn-active | 수정자 | 활성/누름 시각적 상태를 강제합니다. |
| btn-disabled | 수정자 | 버튼이 아닌 요소의 비활성화된 모양 |
| btn-xs | 크기 | 아주 작은 |
| btn-sm | 크기 | 작은 |
| btn-md | 크기 | 중간(기본값) |
| btn-lg | 크기 | 크기가 큰 |
| btn-xl | 크기 | 특대 |
| btn-2xl | 크기 | 2× 특대형 |
| btn-primary | 색상 | 기본 테마 색상 |
| btn-secondary | 색상 | 보조 테마 색상 |
| btn-accent | 색상 | 악센트 테마 색상 |
| btn-neutral | 색상 | 중립 테마 색상 |
| btn-info | 색상 | 정보 의미 색상 |
| btn-success | 색상 | 성공 의미 색상 |
| btn-warning | 색상 | 경고 의미 색상 |
| btn-error | 색상 | 오류 의미 색상 |
기본 사용법
<button class="btn">Button</button> |
<button className="btn">Button</button> |
버튼 크기
html
1 2 3 4 5 6 | <button class="btn btn-xs">Xsmall</button> <button class="btn btn-sm">Small</button> <button class="btn btn-md">Medium</button> <button class="btn btn-lg">Large</button> <button class="btn btn-xl">Xlarge</button> <button class="btn btn-2xl">2XLarge</button> |
버튼 색상
html
1 2 3 4 5 6 7 8 9 | <button class="btn">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-accent">Accent</button> <button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-error">Error</button> <button class="btn btn-neutral">Neutral</button> |
버튼 스타일
소프트 버튼
html
1 2 3 4 5 6 7 8 9 | <button class="btn btn-soft">Default</button> <button class="btn btn-primary btn-soft">Primary</button> <button class="btn btn-secondary btn-soft">Secondary</button> <button class="btn btn-accent btn-soft">Accent</button> <button class="btn btn-info btn-soft">Info</button> <button class="btn btn-success btn-soft">Success</button> <button class="btn btn-warning btn-soft">Warning</button> <button class="btn btn-error btn-soft">Error</button> <button class="btn btn-neutral btn-soft">Neutral</button> |
점선 버튼
html
1 2 3 4 5 6 7 8 9 | <button class="btn btn-dashed">Default</button> <button class="btn btn-dashed btn-primary">Primary</button> <button class="btn btn-dashed btn-secondary">Secondary</button> <button class="btn btn-dashed btn-accent">Accent</button> <button class="btn btn-dashed btn-info">Info</button> <button class="btn btn-dashed btn-success">Success</button> <button class="btn btn-dashed btn-warning">Warning</button> <button class="btn btn-dashed btn-error">Error</button> <button class="btn btn-dashed btn-neutral">Neutral</button> |
개요 버튼
html
1 2 3 4 5 6 7 8 9 | <button class="btn btn-outline">Default</button> <button class="btn btn-outline btn-primary">Primary</button> <button class="btn btn-outline btn-secondary">Secondary</button> <button class="btn btn-outline btn-accent">Accent</button> <button class="btn btn-outline btn-info">Info</button> <button class="btn btn-outline btn-success">Success</button> <button class="btn btn-outline btn-warning">Warning</button> <button class="btn btn-outline btn-error">Error</button> <button class="btn btn-outline btn-neutral">Neutral</button> |
고스트 버튼
html
1 2 3 4 5 6 7 8 9 | <button class="btn-ghost btn">Default</button> <button class="btn btn-ghost btn-primary">Primary</button> <button class="btn btn-ghost btn-secondary">Secondary</button> <button class="btn btn-ghost btn-accent">Accent</button> <button class="btn btn-ghost btn-info">Info</button> <button class="btn btn-ghost btn-success">Success</button> <button class="btn btn-ghost btn-warning">Warning</button> <button class="btn btn-ghost btn-error">Error</button> <button class="btn btn-ghost btn-neutral">Neutral</button> |
링크 버튼
html
1 2 3 4 5 6 7 8 9 | <button class="btn btn-link">Default</button> <button class="btn btn-primary btn-link">Primary</button> <button class="btn btn-secondary btn-link">Secondary</button> <button class="btn btn-accent btn-link">Accent</button> <button class="btn btn-info btn-link">Info</button> <button class="btn btn-success btn-link">Success</button> <button class="btn btn-warning btn-link">Warning</button> <button class="btn btn-error btn-link">Error</button> <button class="btn btn-neutral btn-link">Neutral</button> |
버튼 모양
원형 버튼
html
1 2 3 | <button class="btn btn-circle"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8l16 0" /><path d="M4 16l16 0" /></svg> </button> |
둥근 버튼
html
1 2 3 4 5 | <button class="btn btn-error btn-rounded" aria-label="Remove from favorites"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path> </svg> </button> |
사각형 버튼
html
1 2 3 4 5 | <button class="btn btn-primary btn-square" aria-label="Add to favorites"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path> </svg> </button> |
알약 버튼
html
1 2 3 | <button class="btn btn-primary btn-pill"> Pill button </button> |
버튼 상태
활성 버튼
html
1 2 3 4 5 6 7 8 9 | <button class="btn btn-active">Default</button> <button class="btn btn-primary btn-active">Primary</button> <button class="btn btn-secondary btn-active">Secondary</button> <button class="btn btn-accent btn-active">Accent</button> <button class="btn btn-info btn-active">Info</button> <button class="btn btn-success btn-active">Success</button> <button class="btn btn-warning btn-active">Warning</button> <button class="btn btn-error btn-active">Error</button> <button class="btn btn-neutral btn-active">Neutral</button> |
비활성화된 버튼
html
1 2 3 4 | <button type="button" class="btn btn-primary" disabled="disabled">Disabled using attribute</button> <button type="button" class="btn btn-primary btn-disabled" tabindex="-1" role="button" aria-disabled="true"> Disabled using class name </button> |
버튼 너비
와이드 버튼
html
<button class="btn btn-primary btn-wide">Wide</button> |
차단 버튼
html
<button class="btn btn-primary btn-block">Block</button> |
버튼 태그 유연성
html
1 2 3 4 5 6 7 | <input type="button" value="Input" class="btn btn-primary"> <input type="submit" value="Submit" class="btn btn-primary"> <input type="radio" aria-label="Radio" class="btn btn-primary"> <input type="checkbox" aria-label="Checkbox" class="btn btn-primary"> <input type="reset" value="Reset" class="btn btn-primary"> <button type="submit" class="btn btn-primary">Button</button> <a role="button" class="btn btn-primary">Link</a> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 단추 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.