a11y.skipToMainContent
1

Générateur de bouton CSS

Concevoir de beaux boutons CSS visuellement — remplir, bordure, rayon, ombre et planer — puis copier le CSS.

px
px
px
Fill
Color
Border
px
px
Box shadow

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Button Generator

  1. Définissez le texte du bouton, le rembourrage, la taille et le poids de la police et la couleur du texte.
  2. Choisissez un dégradé solide ou à deux arrêts, et basculez la bordure et l'ombre au besoin.
  3. Choisissez un rayon de bordure et un effet de vol stationnaire (lifter, noircir ou briller) et regardez l'aperçu en direct.
  4. Cliquez sur Copier CSS pour copier les règles .btn et .btn:hover dans votre feuille de style.

Quel est {nom} ?

Ce générateur construit une règle CSS complète pour un bouton des commandes visuelles. Ajustez le texte, le rembourrage, la taille et le poids de la police, la couleur du texte, un dégradé solide ou à deux arrêts, une bordure optionnelle, le border-radius, une ombre déroulante optionnelle et un effet hover, ainsi que les mises à jour de l'aperçu en direct de chaque changement, y compris un état hover de travail appliqué au bouton d'aperçu.

La sortie est un bloc prêt-à-coller .btn { ... } assorti d'un bloc correspondant .btn:hover { ... }, de sorte que vous puissiez déposer à la fois dans votre feuille de style et appliquer la classe btn à n'importe quel élément. Tout est calculé dans votre navigateur; rien n'est téléchargé.

Advertisement

FAQ

L'aperçu montre-t-il l'effet de vol réel ?
Oui. La règle de hover générée est injectée comme un style scoped qui cible seulement le bouton de prévisualisation, donc planer dessus montre exactement ce que le bloc de .btn:hover copié fera.
Puis-je créer un bouton dégradé ?
Cliquez sur le basculement du gradient pour passer du remplissage d'une seule couleur à un gradient linéaire à deux arrêts. Vous pouvez choisir les deux couleurs et définir l'angle de gradient, et les effets de vol stationnaire fonctionnent aussi avec les gradients.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Button Generator on Wikipedia·Developer Tools on Wikipedia·CSS Button Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement