Accueil

Boutons HTML simples

Vous pouvez librement copier le code ou utiliser notre éditeur HTML en direct pour modifier le code selon vos besoins spécifiques.


Boutons HTML simples avec significations de couleurs

<button class="button primary">Primary Button</button>
  <button class="button secondary">Secondary Button</button>
  <button class="button success">Success Button</button>
  <button class="button danger">Danger Button</button>
  <button class="button warning">Warning Button</button>

.button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      margin: 5px;
    }

    /* Primary Button */
    .primary {
      background-color: #3498db;
      color: #fff;
    }

    /* Secondary Button */
    .secondary {
      background-color: #ecf0f1;
      color: #333;
      border: 1px solid #bdc3c7;
    }

    /* Success Button */
    .success {
      background-color: #2ecc71;
      color: #fff;
    }

    /* Danger Button */
    .danger {
      background-color: #e74c3c;
      color: #fff;
    }

    /* Warning Button */
    .warning {
      background-color: #f39c12;
      color: #fff;
    }

Aperçu