Gerador de Botões

Esta ferramenta constrói um botão CSS a partir de texto, cores, dimensionamento, borda, efeito de passar o mouse e box-shadow opcional, com uma pré-visualização interativa ao vivo sobre a qual você pode passar o mouse. Ele produz uma classe `.button { ... }` com uma `transition: all 0.2s ease` e uma regra `.button:hover` separada com base no efeito escolhido (escurecer, clarear, erguer ou nenhum).

1. Insira o texto do botão (o padrão é Click Me). 2. Escolha as cores de fundo e de texto por meio dos seletores de cor ou entradas hexadecimais. 3. Ajuste Tamanho da fonte (10-32px), Padding X (8-48px), Padding Y (4-24px) e Raio da borda (0-50px) com os controles deslizantes. 4. Defina Cor da borda e Largura da borda (0-5px). 5. Escolha um Efeito de passar o mouse: escurecer, clarear, erguer ou nenhum. 6. Opcionalmente, ative Sombra e ajuste Desfoque, Deslocamento X e Deslocamento Y. 7. Passe o mouse sobre a pré-visualização para ver o efeito; clique em Copiar no cartão de Saída CSS.

Escurecer/clarear ajustam a cor de fundo em +/-30 unidades RGB por meio de `adjustBrightness`. Erguer aplica `transform: translateY(-2px)` mais um `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` ao passar o mouse. Nenhum omite inteiramente a regra de hover. A saída é uma única regra `.button` contendo background-color, color, font-size, padding, border-radius, border, cursor, transition e box-shadow opcional, seguida pelo bloco `.button:hover` quando aplicável. Nenhum HTML é gerado.