버튼 상태 생성기
버튼 텍스트, 색상, 모서리와 비활성 스타일을 설정하고 6가지 상태를 미리 보세요.
사용 방법
사용 방법
- 텍스트, 색상, 모서리, 비활성 문구와 색상을 편집합니다.
- 로컬 미리보기에서 6가지 상태를 확인합니다.
- CSS를 복사하거나 다운로드합니다.
6가지 상태
default, hover, active, focus-visible, disabled, loading 예시를 포함합니다. loading은 data-loading 속성과 텍스트 레이블을 사용합니다.
조정을 위한 시작점
미리보기와 CSS는 로컬 예시입니다. 출시 전에 대비, 크기, 키보드 동작, 비활성 의미와 문구를 확인하세요.
외부 리소스 없음
표준 CSS와 텍스트 로딩 표시만 사용하며 외부 폰트, 이미지, 라이브러리, 스타일시트를 가져오지 않습니다.
자주 묻는 질문
더 알아보기
키보드 포커스가 포함되나요?
예. 명확한 :focus-visible 윤곽선을 포함합니다.
loading은 어떻게 표시하나요?
data-loading 속성, 작은 CSS 표시와 레이블을 사용합니다. 실제 작업에 맞게 바꾸세요.
완전한 버튼 컴포넌트인가요?
아니요. CSS 예시입니다. 실제 구현에는 button, 접근 가능한 이름, disabled 속성과 로직이 필요합니다.