CSS 호버 효과 빌더
제한된 호버 스타일을 선택하고 색상과 움직임을 조정한 뒤 HTML과 CSS를 복사하세요.
실시간 미리보기
컨트롤을 수정하면 미리보기가 업데이트됩니다.
:focus-visible 및 prefers-reduced-motion 규칙을 포함합니다. 호버 효과는 장식용으로 사용하고 텍스트를 선명하게 유지하세요.
사용 방법
사용 방법
- 짧은 요소 레이블을 입력하고 위로 이동, 밑줄, 발광 또는 색상을 선택합니다.
- 미리보기를 보며 호버 색상, 이동 거리와 전환 시간을 조정합니다.
- HTML과 CSS를 복사하고 텍스트를 읽기 쉽게 유지하세요.
범위가 제한된 로컬 CSS 생성
네 가지 고정 효과 중 하나로 버튼 예시를 만듭니다. 텍스트는 200자로 제한하고 HTML 특수 문자를 이스케이프합니다. 네트워크, 저장소 또는 외부 의존성이 없습니다.
키보드와 모션 지원
:focus-visible 윤곽선으로 키보드 사용자를 지원하며 prefers-reduced-motion에서는 전환을 제거합니다.
자주 묻는 질문
더 알아보기
어떤 효과를 사용할 수 있나요?
위로 이동, 밑줄, 발광, 색상을 사용할 수 있습니다. 거리와 시간은 제한된 범위로 생성됩니다.
입력 텍스트는 안전한가요?
200자로 제한하고 HTML 특수 문자를 이스케이프한 뒤 출력합니다.
모션 감소를 지원하나요?
네. prefers-reduced-motion: reduce에서 전환을 제거하고 읽기 쉬운 상태를 유지합니다.