Generatore di pulsanti CSS

Progettare pulsanti di bell'aspetto CSS visivamente — riempire, bordo, raggio, ombra e hover — quindi copiare il CSS.

How to use CSS Button Generator

1. Impostare il testo del pulsante, l'imbottitura, la dimensione del carattere e il peso e il colore del testo.
2. Scegliere un riempimento solido o due-stop gradiente, e regolare il bordo e l'ombra come necessario.
3. Scegliere un bordo-radio e un effetto hover (lift, darken, o bagliore) e guardare l'anteprima dal vivo.
4. Fare clic su Copia CSS per copiare entrambe le regole .btn e .btn:hover nel foglio di stile.

Che cos'e'?

FAQ

L'anteprima mostra il vero effetto hover?

Si'. La regola generata hover viene iniettata come uno stile di portata che mira solo il pulsante di anteprima, in modo da scorrere sopra di esso mostra esattamente ciò che il blocco copiato .btn:hover farà.

Posso fare un pulsante gradiente?

Ticcare la toggle gradiente per passare il riempimento da un singolo colore a un gradiente lineare a due stop. È possibile scegliere entrambi i colori e impostare l'angolo gradiente, e gli effetti hover funzionano con gradienti troppo.

Related tools

• Scrollbar Styler
• Box Shadow Generator
• CSS Gradient Generator
• Border Radius Generator