버튼 생성기

이 도구는 텍스트, 색상, 크기, 테두리, 호버 효과 및 선택적 box-shadow를 기반으로 CSS 버튼을 만들며, 호버할 수 있는 라이브 대화형 미리보기를 제공합니다. `transition: all 0.2s ease`가 포함된 `.button { ... }` 클래스를 출력하고, 선택한 호버 효과(어둡게, 밝게, 들어올리기, 없음)에 따라 별도의 `.button:hover` 규칙을 생성합니다.

1. 버튼 텍스트를 입력합니다(기본값 Click Me). 2. 색상 선택기 또는 16진수 입력으로 배경색과 텍스트 색상을 선택합니다. 3. 슬라이더로 글꼴 크기(10-32px), 패딩 X(8-48px), 패딩 Y(4-24px), 테두리 반경(0-50px)을 조정합니다. 4. 테두리 색상과 테두리 두께(0-5px)를 설정합니다. 5. 호버 효과를 선택합니다: 어둡게, 밝게, 들어올리기, 없음. 6. 필요에 따라 그림자를 활성화하고 흐림, 오프셋 X, 오프셋 Y를 조정합니다. 7. 미리보기 위에 마우스를 올려 효과를 확인하고, CSS 출력 카드의 복사 버튼을 클릭합니다.

어둡게/밝게는 `adjustBrightness`를 통해 배경색의 RGB 값을 +/-30합니다. 들어올리기는 호버 시 `transform: translateY(-2px)`와 `box-shadow: 0 4px 8px rgba(0,0,0,0.2)`를 적용합니다. 없음을 선택하면 호버 규칙이 완전히 생략됩니다. 출력은 background-color, color, font-size, padding, border-radius, border, cursor, transition 및 선택적 box-shadow를 포함하는 단일 `.button` 규칙이며, 해당하는 경우 `.button:hover` 블록이 뒤따릅니다. HTML은 생성되지 않습니다.