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

<div class="row hero-buttons">
  <div class="button-container col-md-2">
    <div class="container-title">
      <span>Primary Button</span>
    </div>
    <div class="container-btn">
      <button class="btn btn-primary btn-hero btn-demo">Primary</button>
    </div>
    <div class="states-container primary-container">
      <div class="state-container">
        <div class="gradient"></div>
        <div class="state-details">
          <span class="header">Linear Gradient</span>
          <span class="subheader">to right, #7659ff, #ac63ff</span>
        </div>
      </div>
      <div class="state-container">
        <div class="bevel-border"></div>
        <div class="state-details">
          <span class="header">Bevel Border</span>
          <span class="subheader">0 3px 0 0</span>
          <span class="subheader">#6938c9</span>
        </div>
      </div>
      <div class="state-container">
        <div class="shadow"></div>
        <div class="state-details">
          <span class="header">Shadow</span>
          <span class="subheader">0 4px 10px 0</span>
          <span class="subheader">rgba (6, 7, 64, 0.5)</span>
        </div>
      </div>
      <div class="state-container">
        <div class="glow"></div>
        <div class="state-details">
          <span class="header">Glow</span>
          <span class="subheader">0 2px 12px 0</span>
          <span class="subheader">rgba (137, 66, 254, 0.8)</span>
        </div>
      </div>
    </div>
  </div>
  <div class="button-container col-md-2">
    <div class="container-title">
      <span>Warning Button</span>
    </div>
    <div class="container-btn">
      <button class="btn btn-warning btn-hero btn-demo">Warning</button>
    </div>
    <div class="states-container warning-container">
      <div class="state-container">
        <div class="gradient"></div>
        <div class="state-details">
          <span class="header">Linear Gradient</span>
          <span class="subheader">to right, #ffcb17, #ff874c</span>
        </div>
      </div>
      <div class="state-container">
        <div class="bevel-border"></div>
        <div class="state-details">
          <span class="header">Bevel Border</span>
          <span class="subheader">0 3px 0 0</span>
          <span class="subheader">#ce7b22</span>
        </div>
      </div>
      <div class="state-container">
        <div class="shadow"></div>
        <div class="state-details">
          <span class="header">Shadow</span>
          <span class="subheader">0 4px 10px 0</span>
          <span class="subheader">rgba (33, 7, 77, 0.5)</span>
        </div>
      </div>
      <div class="state-container">
        <div class="glow"></div>
        <div class="state-details">
          <span class="header">Glow</span>
          <span class="subheader">0 2px 12px 0</span>
          <span class="subheader">rgba (255, 193, 38, 0.6)</span>
        </div>
      </div>
    </div>
  </div>
  <div class="button-container col-md-2">
    <div class="container-title">
      <span>Success Button</span>
    </div>
    <div class="container-btn">
      <button class="btn btn-success btn-hero btn-demo">Success</button>
    </div>
    <div class="states-container success-container">
      <div class="state-container">
        <div class="gradient"></div>
        <div class="state-details">
          <span class="header">Linear Gradient</span>
          <span class="subheader">to right, #00c7c7, #00d977</span>
        </div>
      </div>
      <div class="state-container">
        <div class="bevel-border"></div>
        <div class="state-details">
          <span class="header">Bevel Border</span>
          <span class="subheader">0 3px 0 0</span>
          <span class="subheader">#00967d</span>
        </div>
      </div>
      <div class="state-container">
        <div class="shadow"></div>
        <div class="state-details">
          <span class="header">Shadow</span>
          <span class="subheader">0 4px 10px 0</span>
          <span class="subheader">rgba (33, 7, 77, 0.5)</span>
        </div>
      </div>
      <div class="state-container">
        <div class="glow"></div>
        <div class="state-details">
          <span class="header">Glow</span>
          <span class="subheader">0 2px 12px 0</span>
          <span class="subheader">rgba (35, 255, 181, 0.6)</span>
        </div>
      </div>
    </div>
  </div>
  <div class="button-container col-md-2">
    <div class="container-title">
      <span>Info Button</span>
    </div>
    <div class="container-btn">
      <button class="btn btn-info btn-hero btn-demo">Info</button>
    </div>
    <div class="states-container info-container">
      <div class="state-container">
        <div class="gradient"></div>
        <div class="state-details">
          <span class="header">Linear Gradient</span>
          <span class="subheader">to right, #3dafff, #0088ff</span>
        </div>
      </div>
      <div class="state-container">
        <div class="bevel-border"></div>
        <div class="state-details">
          <span class="header">Bevel Border</span>
          <span class="subheader">0 3px 0 0</span>
          <span class="subheader">#4150d9</span>
        </div>
      </div>
      <div class="state-container">
        <div class="shadow"></div>
        <div class="state-details">
          <span class="header">Shadow</span>
          <span class="subheader">0 4px 10px 0</span>
          <span class="subheader">rgba (33, 7, 77, 0.5)</span>
        </div>
      </div>
      <div class="state-container">
        <div class="glow"></div>
        <div class="state-details">
          <span class="header">Glow</span>
          <span class="subheader">0 2px 12px 0</span>
          <span class="subheader">rgba (0, 136, 255, 0.7)</span>
        </div>
      </div>
    </div>
  </div>
  <div class="button-container col-md-2">
    <div class="container-title">
      <span>Danger Button</span>
    </div>
    <div class="container-btn">
      <button class="btn btn-danger btn-hero btn-demo">Danger</button>
    </div>
    <div class="states-container danger-container">
      <div class="state-container">
        <div class="gradient"></div>
        <div class="state-details">
          <span class="header">Linear Gradient</span>
          <span class="subheader">to right, #ff3dae, #ff386a</span>
        </div>
      </div>
      <div class="state-container">
        <div class="bevel-border"></div>
        <div class="state-details">
          <span class="header">Bevel Border</span>
          <span class="subheader">0 3px 0 0</span>
          <span class="subheader">#cc2568</span>
        </div>
      </div>
      <div class="state-container">
        <div class="shadow"></div>
        <div class="state-details">
          <span class="header">Shadow</span>
          <span class="subheader">0 4px 10px 0</span>
          <span class="subheader">rgba (33, 7, 77, 0.5)</span>
        </div>
      </div>
      <div class="state-container">
        <div class="glow"></div>
        <div class="state-details">
          <span class="header">Glow</span>
          <span class="subheader">0 2px 12px 0</span>
          <span class="subheader">rgba (255, 73, 184, 0.8)</span>
        </div>
      </div>
    </div>
  </div>
  <div class="button-container col-md-2">
    <div class="container-title">
      <span>Ghost Button</span>
    </div>
    <div class="container-btn">
      <button class="btn btn-hero btn-demo">Ghost</button>
    </div>
    <div class="states-container default-container">
      <div class="state-container">
        <div class="border"></div>
        <div class="state-details">
          <span class="header">Border</span>
          <span class="subheader">White</span>
        </div>
      </div>
      <div class="state-container">
        <div class="bevel-border"></div>
        <div class="state-details">
          <span class="header">Bevel Border</span>
          <span class="subheader">0 2px 0 0</span>
          <span class="subheader">#665ebd</span>
        </div>
      </div>
      <div class="state-container">
        <div class="shadow"></div>
        <div class="state-details">
          <span class="header">Shadow</span>
          <span class="subheader">0 4px 10px 0</span>
          <span class="subheader">rgba (33, 7, 77, 0.5)</span>
        </div>
      </div>
      <div class="state-container">
        <div class="glow"></div>
        <div class="state-details">
          <span class="header">Glow</span>
          <span class="subheader">0 2px 12px 0</span>
          <span class="subheader">rgba (146, 141, 255, 1)</span>
        </div>
      </div>
    </div>
  </div>
</div>