LocalToolsCollection d’outils de navigateur hors ligne

Catégorie: Développement

Générateur de boutons CSS

Idée interneUn outil manque ?

Composez des boutons CSS personnalisables avec aperçu et code prêt à copier

Concevez un bouton visuellement et copiez un HTML et un CSS propres. Réglez couleurs, bordure, rayon, espacement, ombre et styles de survol et de focus dans votre navigateur.

Survol et focus

Aperçu

Survolez l'aperçu, ou appuyez sur Tab pour l'atteindre, afin de voir les styles de survol et de focus.

HTML
<button class="button" type="button">Get started</button>
CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid #2f6f4f;
  border-radius: 6px;
  background: #2f6f4f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
  background: #255a40;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}

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

/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

L'extrait utilise un vrai <button> et conserve un contour :focus-visible visible. Supprimer ce contour laisserait les personnes au clavier sans repère.

L'aperçu et le code généré sont construits dans votre navigateur.

Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.

À quoi sert cet outil

C'est un éditeur visuel pour un bouton : couleurs, bordure, rayon, marges internes, taille et graisse du texte, ombre, et ce qui change au survol. L'aperçu est mis en forme par le CSS même que vous copiez : le survoler ou l'atteindre au clavier montre donc les vrais états, pas une approximation. Deux choses ne sont pas laissées au hasard. Le balisage est un vrai `<button type="button">`, pas un div stylisé : il est focusable et utilisable au clavier sans effort. Et la sortie conserve toujours un contour `:focus-visible` visible — le bug d'accessibilité le plus courant dans le CSS de bouton généré est un `outline: none` qui prive les personnes au clavier de tout repère sur la page.

Mode d'emploi

  1. Définissez le libellé et le nom de classe, puis choisissez les couleurs de fond, de texte et de bordure.
  2. Ajustez rayon, épaisseur de bordure, marges internes, taille et graisse jusqu'à ce que l'aperçu convienne.
  3. Réglez le fond au survol et l'anneau de focus, puis copiez le HTML et le CSS.

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.

Questions fréquentes

Puis-je créer des styles de survol ?
Oui. Le fond au survol, le soulèvement facultatif et le changement d'ombre font partie du CSS généré, sous forme de règle :hover séparée que vous pouvez modifier ensuite.
Le bouton a-t-il besoin de JavaScript ?
Non. La sortie est du HTML et du CSS simples. Il ne vous faut du script que pour ce que fait le bouton une fois pressé.
Puis-je copier le HTML et le CSS séparément ?
Oui — chacun a son propre bouton de copie, vous pouvez donc mettre le CSS dans une feuille de styles et le balisage là où il va.
Pourquoi le CSS inclut-il un contour de focus ?
Parce que sans lui, une personne qui navigue au clavier ne voit pas sur quel contrôle elle se trouve. La règle générée utilise :focus-visible : l'anneau apparaît au focus clavier sans s'afficher à chaque clic de souris.
Le code généré est-il local ?
Oui. Tous les réglages, l'aperçu et les extraits générés restent dans votre navigateur.

Revenir à tous les outils