CSS 버튼 생성기

생성 코드에 포함되는 내용

HTML은 실제 <button type="button"> 요소를 사용하고 표시 문구를 span 안에 넣습니다. CSS는 다음 6가지 상태를 다룹니다.

• 기본: 아무 조작이 없을 때의 모습
• 호버: 포인팅 장치로 가리킬 때
• 키보드 포커스: :focus-visible로 표시
• 누름: 버튼을 누르는 동안
• 비활성: 기본 disabled 속성으로 표시
• 로딩: aria-busy="true"로 표시

버튼을 언제 비활성 또는 처리 중으로 바꿀지는 실제 애플리케이션이 결정해야 합니다. 생성기는 표시 규칙만 제공하며 애플리케이션 상태를 만들거나 클릭 동작을 연결하지 않습니다.

대비 안내는 검사 자료이지 적합성 인증이 아닙니다

편집기는 기본색, 그라데이션 끝색, 호버색, 누름색 중 가장 낮은 글자 대비를 계산합니다. 일반 크기 글자의 기준으로 4.5:1을 사용합니다. 또한 포커스 윤곽선과 밝은 미리보기 배경을 비교하고 비텍스트 기준으로 3:1을 사용합니다.

이 수치는 흔한 문제를 찾는 데 도움이 되지만 완성된 페이지에서는 버튼이 다른 배경 위에 놓일 수 있습니다. 실제 레이아웃에서 포커스와 테두리 대비를 다시 확인하세요. 비활성 컨트롤은 투명도가 낮아지므로 용도가 명확하지 않다면 가까운 곳에 이유를 설명해야 합니다.

조작 영역 크기와 움직임

내보낸 규칙은 인라인 및 블록 방향 최소 크기를 44 px로 지정합니다. 여러 터치 환경에서 편하게 누를 수 있고 WCAG 2.2 성공 기준 2.5.8의 최소 24 CSS px보다 큰 값입니다. 최종 제품에서는 레이아웃, 간격, 예외와 플랫폼 지침도 함께 고려해야 합니다.

사용자가 움직임 줄이기를 요청하면 호버와 누름 이동을 없앱니다. 로딩 표시는 사라지지 않고 회전만 느려져 처리 중 상태를 계속 알 수 있습니다.

안전한 출력 범위

표시 문구는 정규화하고 최대 120개 자소 클러스터로 제한합니다. 보이지 않는 방향 제어 문자를 제거하고 코드와 다운로드에서 HTML 이스케이프합니다. 색은 6자리 16진수만 허용합니다. 모든 숫자 설정은 반올림하고 각 컨트롤에 표시된 범위로 제한합니다.

전체 편집기는 브라우저 메모리에서 작동합니다. 선택 사항인 4페이지 흐름에서는 버전이 지정된 디자인을 현재 탭의 sessionStorage에 저장합니다. 문구와 디자인 값은 흐름 URL이나 당사 서버로 전송되지 않습니다.

로딩 상태 사용법

애플리케이션 코드에서 처리 중 속성을 추가하거나 제거하세요.

<button type="button" class="generated-button" aria-busy="true" disabled>
  <span class="generated-button__label">저장 중</span>
</button>

aria-busy는 업데이트가 진행 중임을 알립니다. 반복 실행을 막아야 한다면 disabled도 추가하세요. 작업이 끝나면 두 속성을 모두 제거하고 중요한 성공 또는 오류 메시지는 적절한 상태 영역에 표시하세요.