Buttons

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

vAPP Buttons

Button Default Button Cta Outline Button Outline Button with Icon Button with Icon Button with Icon Button Transparent Button Transparent


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

Button Bg White Button Bg Primary Button Bg Orange Button Bg Purple Light Button Bg Green 300 Button Bg Cta 2


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

Check details Download now


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

Try for free App store View demo See all features


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

Regular Size Large 2 Regular Size Extra Large Regular Size Large Regular Size Medium Regular Size Medium 2 Regular Size Medium 3 Regular Size Medium 4 Regular Size Small Regular Size Small 2 Regular Size Regular Size large 2 Regular Size large Regular Size medium Regular Size Small Regular Size Small 2


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.

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 Hover Outline Hover Transparent Hover


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.