Buttons.
The features of the buttons are as follows:
<!-- Buttons Section -->
<section class="section">
<h2>Buttons</h2>
<!-- Button Styles -->
<div class="button-showcase">
<h3>Styles</h3>
<div class="button-group">
<button class="btn">Default</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-soft">Soft</button>
<button class="btn btn-ghost">Ghost</button>
</div>
</div>
<!-- Button Sizes -->
<div class="button-showcase">
<h3>Sizes</h3>
<div class="button-group">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>
</div>
<!-- Button States -->
<div class="button-showcase">
<h3>States</h3>
<div class="button-group">
<button class="btn btn-loading">Loading...</button>
<button class="btn" disabled>Disabled</button>
<button class="btn btn-success">
<i class="fas fa-check"></i>
Success
</button>
<button class="btn btn-danger">
<i class="fas fa-times"></i>
Danger
</button>
</div>
</div>
<!-- Full Width Button -->
<div class="button-showcase">
<h3>Full Width</h3>
<div class="button-group">
<button class="btn btn-full">Full Width Button</button>
</div>
</div>
</section>
Last updated