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

<nga-card>
  <nga-card-header>Hero Buttons</nga-card-header>
  <nga-card-body>
    <div class="row hero-buttons">
      <div class="example-container col-md-2" *ngFor="let hb of heroButtons">
        <div class="container-title">
          <span>{{ hb.title }}</span>
        </div>
        <div class="container-btn">
          <button class="btn {{ hb.class }} btn-hero btn-demo">{{ hb.buttonTitle }}</button>
        </div>
        <div class="states-container {{ hb.container }}">
          <div class="state-container" *ngIf="hb.border">
            <div class="state-value border"></div>
            <div class="state-details">
              <span class="header">Border</span>
              <span class="subheader">{{ hb.border }}</span>
            </div>
          </div>
          <div class="state-container" *ngIf="hb.gradient">
            <div class="state-value gradient"></div>
            <div class="state-details">
              <span class="header">Linear Gradient</span>
              <span class="subheader">{{ hb.gradient }}</span>
            </div>
          </div>
          <div class="state-container">
            <div class="state-value bevel-border"></div>
            <div class="state-details">
              <span class="header">Bevel Border</span>
              <span class="subheader">0 3px 0 0</span>
              <span class="subheader">{{ hb.bevelBorder }}</span>
            </div>
          </div>
          <div class="state-container">
            <div class="state-value shadow"></div>
            <div class="state-details">
              <span class="header">Shadow</span>
              <span class="subheader">0 4px 10px 0</span>
              <span class="subheader">{{ hb.shadow }}</span>
            </div>
          </div>
          <div class="state-container">
            <div class="state-value glow"></div>
            <div class="state-details">
              <span class="header">Glow</span>
              <span class="subheader">0 2px 12px 0</span>
              <span class="subheader">{{ hb.glow }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nga-card-body>
</nga-card>