Buttons

Use our custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

SpaceMax Buttons

Button Default Button Rounded Button without Rounded Eadge Thin Outline Button Thick Outline Button Button with Icon Button Transparent


Markup example:


                                    <!-- Button Regular -->
                                    <a href="#" class="btn btn-bg--primary"><span class="btn__text">Button Default</span></a>
    
                                    <!-- Button Regular Rounded -->
                                    <a href="#" class="btn btn-bg--primary rounded--full"><span class="btn__text">Button Rounded</span></a>
    
                                    <!-- Button without Rounded Eadge-->
                                    <a href="#" class="btn btn-bg--primary rounded--none"><span class="btn__text">Button without Rounded Eadge</span></a>
    
                                    <!-- Button with thin border -->
                                    <a href="#" class="btn btn-border"><span class="btn__text">Thin Outline Button</span></a>
    
                                    <!-- Button with Thick border -->
                                    <a href="#" class="btn btn-border btn-border--width--2"><span class="btn__text">Thick Outline Button</span></a>

                                    <!-- Button with Icon -->
                                    <a href="#" class="btn btn-bg--primary"><span class="btn__text">Button with Icon<i class="icon icon-arrow-right"></i></span></a>
    
                                    <!-- Button without Icon -->
                                    <a href="#" class="btn btn-bg--primary"><span class="btn__text"><i class="icon icon-arrow-right p-0"></i></span></a>

                                    <!-- Button Transparent Icon -->
                                    <a href="#" class="btn btn--transparent m-2"><span class="btn__text">Button Transparent</span></a>

Button Color Options

Button Background Color

Button BG Primary Button BG Light Button BG Dark Button BG Darkblue Button BG CTA V1 Button BG CTA V2 Button BG CTA V3 Button BG CTA V4 Button BG CTA V5


Markup example:


                                        <!-- Button BG Primary -->
                                        <a href="#" class="btn btn-bg--primary m-1"><span class="btn__text">Button BG Primary</span></a>
        
                                        <!-- Button BG Light -->
                                        <a href="#" class="btn btn-bg--primary--05 m-1"><span class="btn__text">Button BG Light</span></a>
                                        
                                        <!-- Button BG Dark -->
                                        <a href="#" class="btn btn-bg--dark m-1"><span class="btn__text">Button BG Dark</span></a>
                                        
                                        <!-- Button BG Dark Blue -->
                                        <a href="#" class="btn btn-bg--darkblue m-1"><span class="btn__text">Button BG Darkblue</span></a>
                                        
                                        <!-- Button BG CTA V1 -->
                                        <a href="#" class="btn btn-bg--cta--1 m-1"><span class="btn__text">Button BG CTA V1</span></a>
        
                                        <!-- Button BG CTA V2 -->
                                        <a href="#" class="btn btn-bg--cta--2 m-1"><span class="btn__text">Button BG CTA V2</span></a>
        
                                        <!-- Button BG CTA V3 -->
                                        <a href="#" class="btn btn-bg--cta--3 m-1"><span class="btn__text">Button BG CTA V3</span></a>
        
                                        <!-- Button BG CTA V4 -->
                                        <a href="#" class="btn btn-bg--cta--4 m-1"><span class="btn__text">Button BG CTA V4</span></a>
        
                                        <!-- Button BG CTA V5 -->
                                        <a href="#" class="btn btn-bg--cta--5 m-1"><span class="btn__text">Button BG CTA V5</span></a>


Button Color White + Transparent Button

Transparent button will fit with any background except white

Button BG Transparent V1 Button BG Transparent V2 Button BG Transparent V3 Button BG White


Markup example:


                                    <!-- Button BG Transparent V1-->
                                    <a href="#" class="btn btn-bg--white--10 color--white"><span class="btn__text">Button BG Transparent V1 </span></a>
    
                                    <!-- Button BG Transparent V2-->
                                    <a href="#" class="btn btn-bg--white--15 color--white"><span class="btn__text">Button BG Transparent V2 </span></a>
    
                                    <!-- Button BG Transparent V3-->
                                    <a href="#" class="btn btn-bg--white--20 color--white"><span class="btn__text">Button BG Transparent V3 </span></a>
    
                                    <!-- Button BG White-->
                                    <a href="#" class="btn btn-bg--white"><span class="btn__text">Button BG White</span></a>

Outline Button Colors

Button Outline Primary Button Outline Dark Button Outline White


Markup example:


                                    <!-- Button Outline Primary-->
                                    <a href="#" class="btn btn-border btn-border--color--primary color--primary"><span class="btn__text">Button Outline Primary </span></a>
    
                                    <!-- Button Outline Dark-->
                                    <a href="#" class="btn btn-border btn-border--color--dark"><span class="btn__text">Button Outline Dark </span></a>
    
                                    <!-- Button Outline Dark-->
                                    <a href="#" class="btn btn-border btn-border--color--light"><span class="btn__text">Button Outline White</span></a>


Button Size

Regular Size Button Regular Size Large Regular Size Medium Regular Size Small


Markup example:


                                    <!-- Regular Size Button -->
                                    <a href="#" class="btn btn-bg--primary mr-1"><span class="btn__text">Regular Size Button</span></a>
    
                                    <!-- Regular Size Large -->
                                    <a href="#" class="btn btn-bg--primary btn-size--lg mr-1"><span class="btn__text">Regular Size Large</span></a>
                                    
                                    <!-- Regular Size Medium -->
                                    <a href="#" class="btn btn-bg--primary btn-size--md mr-1"><span class="btn__text">Regular Size Medium</span></a>
                                    
                                    <!-- Regular Size Small -->
                                    <a href="#" class="btn btn-bg--primary btn-size--sm mr-1"><span class="btn__text">Regular Size Small</span></a>

Button Couple

Apply some space between two buttons. And it won't not work if there is more than two buttons

Button one Button two


Markup example:


                                <div class="button-group">
                                    <a href="#" class="btn btn-bg--primary"><span class="btn__text">Button one</span></a>
                                    <a href="#" class="btn btn-bg--primary"><span class="btn__text">Button two</span></a>
                                </div>

Button Hover Style

Button 3D Hover Button Splash Hover Button Splash & 3D Hover Button Primary BG Hover Button CTA BG Hover V1 Button CTA BG Hover V2 Button CTA BG Hover V3 Button CTA BG Hover V4 Button CTA BG Hover V5 Text Hover Color Primary Text Hover Dark Text Hover Light


Markup example:


                                    <!-- Button 3D Hover -->
                                    <a href="#" class="btn btn-bg--primary btn-hover--3d m-1"><span class="btn__text">Button 3D Hover</span></a>
    
                                    <!-- Button Splash Hover -->
                                    <a href="#" class="btn btn-bg--primary btn-hover--splash m-1"><span class="btn__text">Button Splash Hover</span></a>
    
                                    <!-- Button Splash & 3D Hover -->
                                    <a href="#" class="btn btn-bg--primary btn-hover--3d btn-hover--splash m-1"><span class="btn__text">Button Splash & 3D Hover</span></a>
    
                                    <!-- Button Primary BG Hover -->
                                    <a href="#" class="btn btn-bg--dark btn-hover--primary m-1"><span class="btn__text">Button Primary BG Hover</span></a>
    
                                    <!-- Button CTA BG Hover V1 -->
                                    <a href="#" class="btn btn-bg--primary btn-hover--cta--1 m-1"><span class="btn__text">Button CTA BG Hover V1</span></a>
    
                                    <!-- Button CTA BG Hover V2 -->
                                    <a href="#" class="btn btn-border btn-hover--cta--2 m-1"><span class="btn__text">Button CTA BG Hover V2</span></a>
    
                                    <!-- Button CTA BG Hover V3 -->
                                    <a href="#" class="btn btn-border btn-border--width--2 btn-hover--cta--3 m-1"><span class="btn__text">Button CTA BG Hover V3</span></a>
    
                                    <!-- Button CTA BG Hover V4 -->
                                    <a href="#" class="btn btn-bg--primary btn-hover--cta--4 m-1"><span class="btn__text">Button CTA BG Hover V4</span></a>
    
                                    <!-- Button CTA BG Hover V5 -->
                                    <a href="#" class="btn btn-bg--primary btn-hover--cta--5 m-1"><span class="btn__text">Button CTA BG Hover V5</span></a>
    
                                    <!-- Text Hover Color Primary -->
                                    <a href="#" class="btn text-hover--primary m-1"><span class="btn__text">Text Hover Color Primary</span></a>
    
                                    <!-- Text Hover Dark -->
                                    <a href="#" class="btn color--primary text-hover--dark m-1"><span class="btn__text">Text Hover Dark</span></a>
    
                                    <!-- Text Hover Light -->
                                    <a href="#" class="btn color--primary text-hover--light m-1"><span class="btn__text">Text Hover Light</span></a>

Additional Class Reference

btn
rounded--full
rounded--none
btn--transparent
btn-border
btn-border--width--2
border-width--2
btn-bg--primary
btn-bg--primary--05
btn-bg--dark
btn-bg--darkblue
btn-bg--cta--1
btn-bg--cta--2
btn-bg--cta--3
btn-bg--cta--4
btn-bg--cta--5
btn-bg--white--10
btn-bg--white--15
btn-bg--white--20
btn-bg--white
btn-border--color--primary
btn-border--color--dark
btn-border--color--light
btn-size--lg
btn-size--md
btn-size--sm
button-group
btn-hover--3d
btn-hover--splash
btn-hover--primary
btn-hover--cta--1
btn-hover--cta--2
btn-hover--cta--3
btn-hover--cta--4
btn-hover--cta--5
text-hover--primary
text-hover--dark
text-hover--light
btn__text
btn__text should be child class/ element of btn class

Media buttons references are here.