Buttons

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

vAPP Buttons



Markup example:


                                    <!-- Button Regular -->
                                    <a href="#" class="btn btn-bg--white">Button Default</a>
    
                                    <!-- Button Cta -->
                                    <a href="#" class="btn btn-bg--cta--1 btn-size--xl color-dark-500 box-shadow--1">Button Cta</a>
    
                                    <!-- Button Outline -->
                                    <a href="#" class="btn btn-outline btn-outline--sm border-color-white btn-color--white btn-outline-hover--white">Outline Button</a>
    
                                    <!-- Button Outline with Icon -->
                                    <a href="#" class="btn btn-outline btn-outline--md btn-bg-hover--primary btn-color--white border-color-light--3"><span class="btn-text"><i class="nc-icon nc-apple btn-icon"></i></span>Outline Button with Icon</a>
    
                                    <!-- Button with Icon -->
                                    <a href="#" class="btn btn-color-dark--700 btn-bg--white btn-cta--4"><span class="btn-text"><i class="nc-icon nc-apple btn-icon"></i></span>Button with Icon</a>
    
                                    <!-- Button with Icon -->
                                    <a href="#" class="btn btn-size--lg--2 btn-bg--primary box-shadow--6 btn-color--white"><span class="btn-text">Button with Icon<i class="ml-35 font-w--700 nc-icon nc-tail-right"></i></span></a>
    
                                    <!-- Button Transparent -->
                                    <a href="#" class="btn btn-bg--white--30 btn-color--white btn-size--md--4 text-uppercase font-w--600">Button Transparent</a>
    
                                    <!-- Button Transparent -->
                                    <a href="#" class="btn btn-bg-hover--primary btn-bg--green--10 btn-cta--3 btn-color--primary">Button Transparent</a>

                                    <!-- Button without Icon -->
                                    <button class="btn btn-cta btn-bg--white m-10" type="submit">
                                        <span class="btn-text"><i class="nc-icon nc-send color-primary"></i></span>
                                    </button>
                                

Button Color Options

Button Background Color



Markup example:


                                        <!-- Button Bg Light -->
                                        <a href="#" class="btn btn-bg--white">Button Bg White</a>
    
                                        <!-- Button Bg Primary -->
                                        <a href="#" class="btn btn-bg--primary">Button Bg Primary</a>
    
                                        <!-- Button Bg Orange -->
                                        <a href="#" class="btn btn-bg--orange">Button Bg Orange</a>
    
                                        <!-- Button Bg Purple Light -->
                                        <a href="#" class="btn btn-bg--purple-light">Button Bg Purple Light</a>
    
                                        <!-- Button Bg Green 300 -->
                                        <a href="#" class="btn btn-bg--green--300">Button Bg Green 300</a>
    
                                        <!-- Button Bg Cta 2 -->
                                        <a href="#" class="btn btn-bg--cta--2">Button Bg Cta 2</a>
                                    


Button Color + Transparent Button

Transparent button will fit with any background except white



Markup example:


                                    <!-- Button BG Transparent V1-->
                                    <a href="#" class="btn btn-bg--white--30 btn-color--white">Check details</a>
                                    
                                    <!-- Button BG Transparent V2-->
                                    <a href="#" class="btn btn-bg--green--10 btn-color--white"> Download now</a>
                                

Outline Button Colors



Markup example:


                                    <!-- Button Outline White-->
                                    <a href="#" class="btn btn-outline border-color-white btn-color--white">Try for free</a>
    
                                    <!-- Button Outline light 3-->
                                    <a href="#" class="btn btn-outline border-color-light--3 btn-color-dark--700 btn-outline-hover--dark--700"> <span class="btn-text"><i class="nc-icon nc-apple btn-icon"></i></span>App store</a>
    
                                    <!-- Button Outline light 4-->
                                    <a href="#" class="btn btn-outline border-color-light--4 btn-color-dark--700 btn-outline-hover--dark--700">View demo</a>
    
                                    <!-- Button Outline Primary-->
                                    <a href="#" class="btn btn-outline border-color-primary btn-color--primary btn-outline-hover--primary"><span class="btn-text">See all features</span></a>
                                


Button Size



Markup example:


                                    <!-- Regular Size Large 2 -->
                                    <a href="#" class="btn btn-bg--primary btn-size--lg--2 m-10">Regular Size Large 2</a>
    
                                    <!-- Regular Size Extra Large -->
                                    <a href="#" class="btn btn-bg--primary btn-size--xl m-10">Regular Size Extra Large</a>
    
                                    <!-- Regular Size Large -->
                                    <a href="#" class="btn btn-bg--primary btn-size--lg m-10">Regular Size Large</a>
    
                                    <!-- Regular Size Medium -->
                                    <a href="#" class="btn btn-bg--primary btn-size--md m-10">Regular Size Medium</a>
    
                                    <!-- Regular Size Medium 2 -->
                                    <a href="#" class="btn btn-bg--primary btn-size--md--2 m-10">Regular Size Medium 2</a>
    
                                    <!-- Regular Size Medium 3 -->
                                    <a href="#" class="btn btn-bg--primary btn-size--md--3 m-10">Regular Size Medium 3</a>
    
                                    <!-- Regular Size Medium 4 -->
                                    <a href="#" class="btn btn-bg--primary btn-size--md--4 m-10">Regular Size Medium 4</a>
    
                                    <!-- Regular Size Small -->
                                    <a href="#" class="btn btn-bg--primary btn-size--sm m-10">Regular Size Small</a>
    
                                    <!-- Regular Size Small 2 -->
                                    <a href="#" class="btn btn-bg--primary btn-size--sm--2 m-10">Regular Size Small 2</a>

                                    <!-- Button Ouline Size -->
                                    <a href="#" class="btn btn-outline border-color-primary btn-color--primary btn-outline-hover--primary"><span class="btn-text">Regular Size</span></a>
                                    
                                    <!-- Button Ouline Size Large 2  -->
                                    <a href="#" class="btn btn-outline btn-outline--lg--2 border-color-primary btn-color--primary btn-outline-hover--primary"><span class="btn-text">Regular Size large 2</span></a>
    
                                    <!-- Button Ouline Size Large -->
                                    <a href="#" class="btn btn-outline btn-outline--lg border-color-primary btn-color--primary btn-outline-hover--primary"><span class="btn-text">Regular Size large</span></a>
                                
                                    <!-- Button Ouline Size medium -->
                                    <a href="#" class="btn btn-outline btn-outline--md border-color-primary btn-color--primary btn-outline-hover--primary"><span class="btn-text">Regular Size medium</span></a>
                                    
                                    <!-- Button Ouline Size Small -->
                                    <a href="#" class="btn btn-outline btn-outline--sm border-color-primary btn-color--primary btn-outline-hover--primary"><span class="btn-text">Regular Size Small</span></a>
    
                                    <!-- Button Ouline Size Small 2 -->
                                    <a href="#" class="btn btn-outline btn-outline--sm--2 border-color-primary btn-color--primary btn-outline-hover--primary"><span class="btn-text">Regular Size Small 2</span></a>
                                

Button Couple

Apply some space between two buttons.



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



Markup example:


                                        <!-- Button  Hover -->
                                        <a href="#" class="btn btn-bg--primary btn-hover">Button Hover</a>
        
                                        <!-- Button Hover otline -->
                                        <a href="#" class="btn btn-outline btn-outline--sm border-color-primary btn-color--primary btn-outline-hover--primary btn-hover">Outline Hover</a>
        
                                        <!-- Button Hover Transparent -->
                                        <a href="#" class="btn btn-bg--green--10 btn-color--white btn-hover"> Transparent Hover</a>
                                

Additional Class Reference


btn
btn-link
btn-icon
btn-text
btn-color—primary
btn-color—white
btn-color-dark—700
btn-bg—primary
btn-bg—white
btn-bg—dark—300
btn-bg—white—30
btn-bg—green—10
btn-bg—cta—1
btn-bg—cta—2
btn-cta
btn-cta-2
btn-cta-3
btn-cta-4
btn-size--xl
btn-size-—lg
btn-size—-lg-—2
btn-size--md
btn-size--md--2
btn-size--md--3
btn-size--md--4
btn-size--sm
btn-size--sm--2
button-group
btn-outline
btn-outline--lg--2
btn-outline--md
btn-outline--sm
btn-outline--sm--2
btn-media
btn-media--xl
btn-media--lg
btn-media--md
btn-media--sm
btn-hover
btn__text
btn__text should be child class/ element of btn class

Media buttons references are here.