ngx-admin/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html

<div class="row">
  <div class="btn-default-container col-md-4">
    <div class="btn-container-title">
      <span>Primary Button</span>
    </div>
    <div>
      <button class="btn btn-primary btn-demo">Primary</button>
    </div>
    <div class="btn-details-container">
      <div class="btn-details-item">
        <div>
          <button class="btn btn-primary btn-empty"></button>
        </div>
        <div>
          <span>Default</span>
          <span>#7659ff</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-primary btn-empty hover"></button>
        </div>
        <div>
          <span>Hover</span>
          <span>20% white</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-primary btn-empty active"></button>
        </div>
        <div>
          <span>Active</span>
          <span>20% black</span>
        </div>
      </div>
    </div>
  </div>
  <div class="btn-default-container col-md-4">
    <div class="btn-container-title">
      <span>Warning Button</span>
    </div>
    <div>
      <button class="btn btn-warning btn-demo">Warning</button>
    </div>
    <div class="btn-details-container">
      <div class="btn-details-item">
        <div>
          <button class="btn btn-warning btn-empty"></button>
        </div>
        <div>
          <span>Default</span>
          <span>#ffcb17</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-warning btn-empty hover"></button>
        </div>
        <div>
          <span>Hover</span>
          <span>20% white</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-warning btn-empty active"></button>
        </div>
        <div>
          <span>Active</span>
          <span>20% black</span>
        </div>
      </div>
    </div>
  </div>
  <div class="btn-default-container col-md-4">
    <div class="btn-container-title">
      <span>Success Button</span>
    </div>
    <div>
      <button class="btn btn-success btn-demo">Success</button>
    </div>
    <div class="btn-details-container">
      <div class="btn-details-item">
        <div>
          <button class="btn btn-success btn-empty"></button>
        </div>
        <div>
          <span>Default</span>
          <span>#00d977</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-success btn-empty hover"></button>
        </div>
        <div>
          <span>Hover</span>
          <span>20% white</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-success btn-empty active"></button>
        </div>
        <div>
          <span>Active</span>
          <span>20% black</span>
        </div>
      </div>
    </div>
  </div>
  <div class="btn-default-container col-md-4 col-sm-6 col-6">
    <div class="btn-container-title">
      <span>Info Button</span>
    </div>
    <div>
      <button class="btn btn-info btn-demo">Info</button>
    </div>
    <div class="btn-details-container">
      <div class="btn-details-item">
        <div>
          <button class="btn btn-info btn-empty"></button>
        </div>
        <div>
          <span>Default</span>
          <span>#0088ff</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-info btn-empty hover"></button>
        </div>
        <div>
          <span>Hover</span>
          <span>20% white</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-info btn-empty active"></button>
        </div>
        <div>
          <span>Active</span>
          <span>20% black</span>
        </div>
      </div>
    </div>
  </div>
  <div class="btn-default-container col-md-4 col-sm-6 col-6">
    <div class="btn-container-title">
      <span>Danger Button</span>
    </div>
    <div>
      <button class="btn btn-danger btn-demo">Danger</button>
    </div>
    <div class="btn-details-container">
      <div class="btn-details-item">
        <div>
          <button class="btn btn-danger btn-empty"></button>
        </div>
        <div>
          <span>Default</span>
          <span>#ff386a</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-danger btn-empty hover"></button>
        </div>
        <div>
          <span>Hover</span>
          <span>20% white</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-danger btn-empty active"></button>
        </div>
        <div>
          <span>Active</span>
          <span>20% black</span>
        </div>
      </div>
    </div>
  </div>
  <div class="btn-default-container col-md-4 col-sm-6 col-6">
    <div class="btn-container-title">
      <span>Default Button</span>
    </div>
    <div>
      <button class="btn btn-demo">Default</button>
    </div>
    <div class="btn-details-container">
      <div class="btn-details-item">
        <div>
          <button class="btn btn-empty"></button>
        </div>
        <div>
          <span>Default</span>
          <span>transparent</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-empty hover"></button>
        </div>
        <div>
          <span>Hover</span>
          <span>20% white</span>
        </div>
      </div>
      <div class="btn-details-item">
        <div>
          <button class="btn btn-empty active"></button>
        </div>
        <div>
          <span>Active</span>
          <span>20% black</span>
        </div>
      </div>
    </div>
  </div>
</div>