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

<nb-card>
  <nb-card-header>Hero Buttons</nb-card-header>
  <nb-card-body>
    <div class="row">
      <div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
        <div class="container-title">
          <span>{{ hb.title }}</span>
        </div>
        <div class="container-btn">
          <button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
        </div>
        <div class="{{ hb.container }}">
          <div class="state-container" *ngIf="hb[themeName].border">
            <div class="state-value border"></div>
            <div class="state-details">
              <span class="header">Border</span>
              <span class="subheader">{{ hb[themeName].border }}</span>
            </div>
          </div>
          <div class="state-container" *ngIf="hb[themeName].gradientLeft">
            <div class="state-value gradient"></div>
            <div class="state-details">
              <span class="header">Linear Gradient</span>
              <span class="subheader">{{ hb[themeName].gradientLeft }}</span>
              <span class="subheader">{{ hb[themeName].gradientRight }}</span>
            </div>
          </div>
          <div class="state-container">
            <div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
            <div class="state-details" *ngIf="hb[themeName].bevel">
              <span class="header">Bevel</span>
              <span class="subheader">0 3px 0 0</span>
              <span class="subheader">{{ hb[themeName].bevel }}</span>
            </div>
            <div class="state-details" *ngIf="!hb[themeName].bevel">
              <span class="header">No Bevel</span>
            </div>
          </div>
          <div class="state-container">
            <div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
            <div class="state-details" *ngIf="hb[themeName].shadow">
              <span class="header">Shadow</span>
              <span class="subheader">0 4px 10px 0</span>
              <span class="subheader">{{ hb[themeName].shadow }}</span>
            </div>
            <div class="state-details" *ngIf="!hb[themeName].shadow">
              <span class="header">No Shadow</span>
            </div>
          </div>
          <div class="state-container">
            <div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
            <div class="state-details" *ngIf="hb[themeName].glow">
              <span class="header">Glow</span>
              <span class="subheader">0 2px 12px 0</span>
              <span class="subheader">{{ hb[themeName].glow }}</span>
            </div>
            <div class="state-details" *ngIf="!hb[themeName].glow">
              <span class="header">No Glow</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nb-card-body>
</nb-card>