Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-19 08:50:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
ngx-admin/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html

249 lines
9.7 KiB
HTML
Raw Normal View History

refactor(theme): theme refactor, buttons, toaster, preloader
2017-06-02 12:43:23 +03:00
<div class="row">
<div class="btn-hero-container col-md-2">
<div class="container-title">
<span>Primary Button</span>
</div>
<div class="container-btn">
<button class="btn btn-primary btn-primary-hero btn-demo">Primary</button>
</div>
<div class="btn-components-container primary-container">
<div class="btn-component">
<div class="btn-gradient"></div>
<div class="btn-component-details">
<span class="btn-component-header">Linear Gradient</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
</div>
</div>
<div class="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 3px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
</div>
</div>
<div class="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
</div>
</div>
<div class="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
</div>
</div>
</div>
</div>
<div class="btn-hero-container col-md-2">
<div class="container-title">
<span>Warning Button</span>
</div>
<div class="container-btn">
<button class="btn btn-warning btn-warning-hero btn-demo">Warning</button>
</div>
<div class="btn-components-container warning-container">
<div class="btn-component">
<div class="btn-gradient"></div>
<div class="btn-component-details">
<span class="btn-component-header">Linear Gradient</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
</div>
</div>
<div class="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 3px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
</div>
</div>
<div class="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
</div>
</div>
<div class="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
</div>
</div>
</div>
</div>
<div class="btn-hero-container col-md-2">
<div class="container-title">
<span>Success Button</span>
</div>
<div class="container-btn">
<button class="btn btn-success btn-success-hero btn-demo">Success</button>
</div>
<div class="btn-components-container success-container">
<div class="btn-component">
<div class="btn-gradient"></div>
<div class="btn-component-details">
<span class="btn-component-header">Linear Gradient</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
</div>
</div>
<div class="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 3px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
</div>
</div>
<div class="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
</div>
</div>
<div class="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
</div>
</div>
</div>
</div>
<div class="btn-hero-container col-md-2">
<div class="container-title">
<span>Info Button</span>
</div>
<div class="container-btn">
<button class="btn btn-info btn-info-hero btn-demo">Info</button>
</div>
<div class="btn-components-container info-container">
<div class="btn-component">
<div class="btn-gradient"></div>
<div class="btn-component-details">
<span class="btn-component-header">Linear Gradient</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
</div>
</div>
<div class="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 3px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
</div>
</div>
<div class="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
</div>
</div>
<div class="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
</div>
</div>
</div>
</div>
<div class="btn-hero-container col-md-2">
<div class="container-title">
<span>Danger Button</span>
</div>
<div class="container-btn">
<button class="btn btn-danger btn-danger-hero btn-demo">Danger</button>
</div>
<div class="btn-components-container danger-container">
<div class="btn-component">
<div class="btn-gradient"></div>
<div class="btn-component-details">
<span class="btn-component-header">Linear Gradient</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
</div>
</div>
<div class="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 3px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
</div>
</div>
<div class="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
</div>
</div>
<div class="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
</div>
</div>
</div>
</div>
<div class="btn-hero-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="btn-components-container default-container">
<div class="btn-component">
<div class="btn-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Border</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
</div>
</div>
<div class="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 2px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
</div>
</div>
<div class="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
</div>
</div>
<div class="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
</div>
</div>
</div>
</div>
</div>
Reference in a new issue Copy permalink