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