Générateur de bouton CSS

Personnalisez un bouton (couleurs, coins arrondis, ombre, texte) et visualisez le rendu en direct avant de copier le code CSS complet, prêt à coller dans votre projet. Génération 100% locale dans votre navigateur.

Texte du bouton

Couleur de fond

Couleur du texte

Rayon des coins : 8px

Taille du texte : 16px

Padding vertical : 12px

Padding horizontal : 24px

Ombre portée Texte en gras

Code CSS

.btn {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: #2269dd;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

Comment ça marche

Un bouton bien conçu doit être immédiatement identifiable comme cliquable, avec un contraste suffisant entre le texte et le fond, et un effet de survol qui confirme l'interactivité. Ajustez chaque paramètre (couleurs, rayon des coins, ombre, taille) et observez le rendu en direct dans l'aperçu, puis copiez le code CSS complet, incluant automatiquement un état :hover avec une teinte assombrie et un léger effet de soulèvement.

Comment la couleur de survol est-elle calculée ?

La couleur de survol est générée automatiquement en assombrissant la couleur de fond choisie, pour garantir un contraste visible au passage de la souris sans avoir besoin de choisir une seconde couleur manuellement.

Le CSS généré est-il compatible avec tous les frameworks ?

Oui, il s'agit de CSS standard sans dépendance à un framework particulier : vous pouvez le coller dans une feuille de style classique, l'adapter en tant que classe utilitaire, ou le convertir manuellement en style Tailwind ou en styled-components si votre projet en utilise.

Le rendu et le code sont générés en temps réel dans votre navigateur, sans aucune requête vers un serveur.