Buttons

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

Open Bootstrap Docs

Example


                                    <a href="#" class="btn btn--bg-primary"><span class="btn__text">Default</span></a>
                                    <a href="#" class="btn btn--bg-primary rounded-full"><span class="btn__text">Rounded</span></a>
                                

                                        <a href="#" class="btn btn--bg-primary">
                                        <span class="btn__text">Button Primary</span>
                                    </a>

                                    <a href="#" class="btn btn--sm btn--bg-primary">
                                        <span class="btn__text">Button Primary</span>
                                    </a>

                                    <a href="#" class="btn btn--outline">
                                        <span class="btn__text">Button Outline</span>
                                    </a>

                                    <a href="#" class="btn btn--outline-thick">
                                        <span class="btn__text">Button Outline Thick</span>
                                    </a>

                                    <a href="#" class="btn btn--bg-white btn--color-primary">
                                        <span class="btn__text">Button BG White</span>
                                    </a>

                                    <a href="#" class="btn btn--color-coral">
                                        <span class="btn__text">Button Color Coral </span>
                                    </a>

                                    <a href="#" class="btn btn--underline btn--color-grey">
                                        <span class="btn__text">Button underline </span>
                                    </a>

                                    <a href="#" class="btn btn--underline btn--color-dark">
                                        <span class="btn__text mr-10">Button Underline with Arrow </span>
                                        <i class="fa fa-caret-right"></i>
                                    </a>

                                    <a href="#" class="btn btn--transparent p-0 btn--arrow-after btn--color-dark">
                                        <span class="btn__text mr-30">Button Arrow</span>
                                    </a>
    
                                

                                        <a href="#" class="mr-30 btn btn--outline btn--bg-white btn-3d-hover">
                                        <span class="btn__text">Button 3D Hover</span>
                                    </a>

                                    <a href="#" class="mr-30 btn btn--bg-primary btn-splash-hover">
                                        <span class="btn__text">Button Splash Hover</span>
                                    </a>

                                    <a href="#" class="mr-30 btn btn--bg-primary btn-3d-hover btn-splash-hover">
                                        <span class="btn__text">Button 3D and Splash Hover</span>
                                    </a>

                                    <a href="#" class="mr-30 btn btn--underline btn--color-grey btn-text-hover">
                                        <span class="btn__text">Button Text Hover </span>
                                    </a>

                                    <a href="#" class="mr-30 btn btn--transparent p-0 btn--arrow-after btn--color-dark btn-border-hover">
                                        <span class="btn__text mr-30">Button Border Hover</span>
                                    </a>    
    
                                
Class Reference

.btn--sm
.btn--transparent
.btn--bg-primary
.btn--bg-white
.btn--color-primary
.btn--color-dark
.btn--color-white
.btn--color-grey
.btn--color-coral
.btn--outline
.btn--outline-thick
.btn--underline
.btn--arrow-after
Hover Effect

.btn-3d-hover
.btn-splash-hover
.btn-border-hover
.btn-text-hover