CSS Button Générateur
Stylisez un bouton avec des contrôles en direct et copiez du CSS prêt à l'emploi, y compris les états de survol et actifs.
Stylisez visuellement un bouton et copiez le CSS qu'il produit. Vous définissez les couleurs de l'étiquette, de l'arrière-plan et du texte, le remplissage horizontal et vertical et le rayon des coins ; l'aperçu est mis à jour instantanément et la zone de code se remplit d'un ensemble de règles complet et prêt à être copié. C'est un moyen rapide de définir l'apparence d'un appel à l'action sans écrire le CSS à la main ni deviner les valeurs des pixels. Tout fonctionne dans votre navigateur.
Ce que vous pouvez contrôler
Deux sélecteurs de couleurs définissent les couleurs d'arrière-plan et de texte. Trois curseurs gèrent l'espacement et la forme : remplissage horizontal(12 à 80 px), remplissage vertical(8 à 50 px) et rayon de coin(0 à 60 px), chacun affichant sa valeur actuelle en pixels lorsque vous faites glisser. L'aperçu en direct reflète immédiatement chaque changement, y compris un effet de survol, afin que vous puissiez juger de la sensation réelle du bouton plutôt que de lire des chiffres.
Le CSS que vous obtenez
The generated rule targets a .custom-button class and includes more than just your settings: it adds cursor: pointer, a semi-bold Inter font, a smooth transition, and flex centring so an icon and label line up. It also writes a :hover state that lifts the button slightly, brightens it and adds a soft shadow, plus an :active state that presses it back down. Paste the whole block into your stylesheet and rename the class to suit your project.
Foire Aux Questions
Le CSS généré inclut-il des effets de survol ?
Oui. À côté de la règle de base .custom-button, il écrit un état :hover (un léger soulèvement, une augmentation de la luminosité et une ombre douce) et un état :active qui appuie à nouveau sur le bouton.
Quelles unités utilise-t-il pour le rembourrage et le rayon ?
Pixels. Plages de remplissage horizontal de 12 à 80 px, remplissage vertical de 8 à 50 px et rayon de coin de 0 à 60 px, chacun étant affiché en direct lorsque vous déplacez le curseur.
Puis-je changer le nom de la classe ?
Yes. The rule is written for a class called .custom-button, but it is just text — rename it in the copied code to match your own naming convention.
Does it set a specific font?
The CSS specifies the Inter font family at semi-bold weight. If Inter is not loaded on your site the browser falls back to its default sans-serif, so change that line if you use a different font.