Buttons

The classic button, in different colors, sizes, and states


Standard Buttons

            
            <button class="btn">Default</button>
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-secondary">Secondary</button>
            <button class="btn btn-gray">Gray</button>
            
          

Outlined Buttons

            
            <button class="btn outlined">Default</button>
            <button class="btn outlined btn-primary">Primary</button>
            <button class="btn outlined btn-gray">Gray</button>
            
          

Floating Action Buttons

            
            <button class="btn fab"><span class="fas fa-shopping-cart"></span></button>
            <button class="btn fab btn-secondary"><span class="fas fa-shopping-cart"></span></button>
            <button class="btn fab btn-primary"><span class="fas fa-shopping-cart"></span></button>
            <button class="btn fab outlined btn-gray"><span class="fas fa-shopping-cart"></span></button>
            <button class="btn fab small-fab outlined"><span class="fas fa-cog"></span></button>
            
          

Button Sizes

            
            <button class="btn large">Large</button>
            <button class="btn">Regular</button>
            <button class="btn small">Small</button>
            
          

Other Variants

            
            <button class="btn">
                <span class="fas fa-shopping-cart btn-icon"></span>
                Add to Cart
            </button>
            <button class="btn outlined rounded">Rounded Btn</button>
            <button class="btn outlined rounded-full">Rounded Btn</button>