Start learning

Simple HTML buttons

You can freely copy the code or you can use our free live HTML editor to modify the code according to your specific needs.


HTML Simple buttons with color meanings

<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;
    }

Preview