Trình tạo nút điều khiển

Công cụ này xây dựng một nút CSS từ văn bản, màu sắc, kích thước, đường viền, hiệu ứng di chuột và box-shadow tùy chọn, với bản xem trước tương tác trực tiếp mà bạn có thể di chuột qua. Nó xuất ra một lớp `.button { ... }` với `transition: all 0.2s ease` và một quy tắc `.button:hover` riêng dựa trên hiệu ứng di chuột đã chọn (tối hơn, sáng hơn, nâng lên hoặc không).

1. Nhập Văn bản nút (mặc định là Click Me). 2. Chọn màu Nền và màu Văn bản thông qua bộ chọn màu hoặc ô nhập hex. 3. Điều chỉnh Cỡ chữ (10-32px), Đệm X (8-48px), Đệm Y (4-24px) và Bán kính đường viền (0-50px) bằng các thanh trượt. 4. Đặt Màu đường viền và Độ dày đường viền (0-5px). 5. Chọn Hiệu ứng di chuột: tối hơn, sáng hơn, nâng lên hoặc không. 6. Tùy chọn bật Đổ bóng và điều chỉnh Độ mờ, Độ dời X và Độ dời Y. 7. Di chuột qua bản xem trước để xem hiệu ứng; nhấp Sao chép trên thẻ Đầu ra CSS.

Tối hơn/sáng hơn điều chỉnh màu nền +/-30 đơn vị RGB thông qua `adjustBrightness`. Nâng lên áp dụng `transform: translateY(-2px)` cộng với `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` khi di chuột. Không bỏ qua hoàn toàn quy tắc di chuột. Đầu ra là một quy tắc `.button` duy nhất chứa background-color, color, font-size, padding, border-radius, border, cursor, transition và box-shadow tùy chọn, theo sau là khối `.button:hover` khi áp dụng. Không có HTML nào được tạo.