1. Adminos
  2. Basic Components
  3. Buttons
Colors buttons

Use any of the available button classes to quickly create a styled button. .btn-default, .btn-primary, .btn-success e.t.c..

Normal buttons

Different size

If You want larger or smaller buttons You can add .btn-lg, .btn-sm, or .btn-xs class.

Button Sizes




Outline and Block Buttons

Create block level buttons or outline buttons, by adding .btn-block or .btn-outline.

Outline buttons

Block buttons

Button dropdowns

Droppdowns buttons are available with any color and any size.

Dropdowns
                                                        
<h6 class="font-bold">Dropdowns</h6>
<div class="btn-group">
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Primary
            <span class="fa fa-angle-down"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
        </ul>
    </div>
</div>
Dropdowns Buttons With Icon
Dropdowns Outline
Grouped Buttons

This is a group of buttons, ideal for sytuation where many actions are related to same element.

Button Group


Button Group Outline

                                                        
<h6 class="font-bold">Button Group</h6>
<div class="btn-group">
    <button class="btn btn-white" type="button">Left</button>
    <button class="btn btn-primary" type="button">Middle</button>
    <button class="btn btn-white" type="button">Right</button>
</div>
<br>
<br>
<h6 class="font-bold">Button Group Outline</h6>
<div class="btn-group">
    <button class="btn btn-outline btn-white" type="button">Left</button>
    <button class="btn btn-outline btn-info" type="button">Middle</button>
    <button class="btn btn-outline btn-white" type="button">Right</button>
</div>



Icon Buttons

To buttons with any color or any size you can add extra icon on the left or the right side.

Common Icon Buttons

Stared

Toggle buttons Variations

Button groups can act as a radio or a switch or even a single toggle. Below are some examples click to see what happens

                                                    
<h6 class="font-bold">Common Icon Buttons</h6>
<p>
    <button class="btn btn-primary " type="button"><i class="fa fa-check"></i> Submit</button>
    <button class="btn btn-success " type="button"><i class="fa fa-upload"></i>  <span class="bold">Upload</span></button>
    <button class="btn btn-info " type="button"><i class="fa fa-paste"></i> Edit</button>
    <button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">Warning</span></button>
    <button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i>  Map</button>
    <a class="btn btn-white">
        <i class="fa fa-user-md"></i>
    </a>
    <a class="btn btn-white">
        <i class="fa fa-users"></i>
    </a>
    <a class="btn btn-white">
        <i class="fa fa-wrench"></i>
    </a>
    <a class="btn btn-white">
        <i class="fa fa-exchange"></i>
    </a>
    <a class="btn btn-white">
        <i class="fa fa-check-circle"></i>
    </a>
    <a class="btn btn-white">
        <i class="fa fa-road"></i>
    </a>
    <a class="btn btn-white">
        <i class="fa fa-ambulance"></i>
    </a>
    <a class="btn btn-white">
        <i class="fa fa-star"></i> Stared
    </a>
</p>
<div class="space"></div>
<hr>
<h6 class="font-bold">Toggle buttons Variations</h6>
<p>Button groups can act as a radio or a switch or even a single toggle. Below are some examples click to see what happens</p>
<button data-toggle="button" class="btn btn-primary btn-outline" type="button">Single Toggle</button>
<button data-toggle="button" class="btn btn-primary" type="button">Single Toggle</button>
<div data-toggle="buttons-checkbox" class="btn-group">
    <button class="btn btn-primary active" type="button"><i class="fa fa-bold"></i> Bold</button>
    <button class="btn btn-primary" type="button"><i class="fa fa-underline"></i> Underline</button>
    <button class="btn btn-primary active" type="button"><i class="fa fa-italic"></i> Italic</button>
</div>
Circle Icon Buttons

For buttons you can add .btn-circle to rounded buttons and make it circle.

Circle buttons





Circle Gradient Color buttons


                                                        
<p>
    For buttons you can add <code>.btn-circle</code> to rounded buttons and make it circle.
</p>
<h6 class="font-bold">Circle buttons</h6>
<br>
<button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i>
</button>
<button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i>
</button>
<button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i>
</button>
<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i>
</button>
<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i>
</button>
<button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i>
</button>
<button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i></button>
<br>
<br>
<button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i></button>
<button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i></button>
<button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i></button>
<button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i></button>
<button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i></button>
<button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i></button>
<button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i></button>
<br>
<br>
<h6 class="font-bold">Circle Gradient Color buttons</h6>
<br>
<br>
<button class="btn btn-gradient-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i></button>
<button class="btn btn-gradient-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i></button>
<button class="btn btn-gradient-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i></button>
<button class="btn btn-gradient-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i></button>
<button class="btn btn-gradient-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i></button>
<button class="btn btn-gradient-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i></button>
<button class="btn btn-gradient-danger-outline btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i></button>
Rounded Buttons

You can also add .btn-rounded class to round buttons.

Button Group

Default Primary Success Info Warning Danger Danger

Default Primary Success Info Warning Danger Danger

Block rounded with icon button Block rounded gradient color with icon button 


                                                            
<p>
    You can also add <code>.btn-rounded</code> class to round buttons.
</p>
<h6 class="font-bold">Button Group</h6>
<p>
<a class="btn btn-default btn-rounded" href="#">Default</a>
<a class="btn btn-primary btn-rounded" href="#">Primary</a>
<a class="btn btn-success btn-rounded" href="#">Success</a>
<a class="btn btn-info btn-rounded" href="#">Info</a>
<a class="btn btn-warning btn-rounded" href="#">Warning</a>
<a class="btn btn-danger btn-rounded" href="#">Danger</a>
<a class="btn btn-danger btn-rounded btn-outline" href="#">Danger</a>
<br>
<br>
<a class="btn btn-gradient-default btn-rounded" href="#">Default</a>
<a class="btn btn-gradient-primary btn-rounded" href="#">Primary</a>
<a class="btn btn-gradient-success btn-rounded" href="#">Success</a>
<a class="btn btn-gradient-info btn-rounded" href="#">Info</a>
<a class="btn btn-gradient-warning btn-rounded" href="#">Warning</a>
<a class="btn btn-gradient-danger btn-rounded" href="#">Danger</a>
<a class="btn btn-gradient-danger-outline btn-rounded" href="#">Danger</a>
<br>
<br>
<a class="btn btn-primary btn-rounded btn-block" href="#"><i class="fa fa-info-circle"></i> Block rounded with icon button</a>
<a class="btn btn-gradient-primary btn-rounded btn-block" href="#"><i class="fa fa-info-circle"></i> Block rounded gradient color with icon button</a>
Bootstrap Button Custom Bright Color With Icon
Bootstrap Button with Icon

Bootstrap provides different styles of buttons.To achieve the button styles below, Bootstrap has the following classes .btn, .btn-custom-primary, .btn-custom-danger, .btn-custom-info, .btn-custom-warning, .btn-custom-success, etc

Bootstrap Button Custom Gradient Color With Icon
Bootstrap Button with Icon

Bootstrap provides different styles of buttons.To achieve the button styles below, Bootstrap has the following classes .btn, .btn-gradient-primary, .btn-gradient-danger, .btn-gradient-info, .btn-gradient-warning, .btn-gradient-success, etc

Layout Theme Color Buttons
Bootstrap Button with Icon

Bootstrap provides different styles of buttons.To achieve the button styles below, Bootstrap has the following classes .btn .blue-theme .brown-theme .dark-gray-theme .dark-pink-theme .default-theme etc

Bootstrap Button With Icon
Bootstrap Button with Icon

Bootstrap provides different styles of buttons.To achieve the button styles below, Bootstrap has the following classes .btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, etc

Bootstrap Button Sizes
Bootstrap Button Sizes

Bootstrap provides four button sizes.The classes that define the different sizes are .btn-lg .btn-md .btn-sm

Bootstrap Button Sizes with Icon

Bootstrap provides four button sizes.The classes that define the different sizes are .btn-lg .btn-md .btn-sm

Bootstrap Button Groups
Bootstrap Button Groups

Bootstrap allows you to group a series of buttons together (on a single line) in a button group. Use a div element with class .btn-group to create a button group.

Bootstrap Button Groups With Icon

Bootstrap allows you to group a series of buttons together (on a single line) in a button group. Use a div element with class .btn-group to create a button group.

Vertical Button Groups
Vertical Button Groups

Bootstrap also supports vertical button groups.Use the class .btn-group-vertical to create a vertical button group.

Vertical Button Groups With Icon

Bootstrap also supports vertical button groups.Use the class .btn-group-vertical to create a vertical button group.

Standard Icon Button Group
Standard Icon Button Group

These are the different buttons group component

Standard Icon Color Button Group

These are the different buttons group component

Social Buttons Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!
Buttons example

All available social buttons

Sign in with App.net Sign in with Bitbucket Sign in with Dropbox Sign in with Facebook Sign in with Flickr Sign in with Foursquare Sign in with GitHub Sign in with Google Sign in with Instagram Sign in with LinkedIn Sign in with Microsoft Sign in with OpenID Sign in with Pinterest Sign in with Reddit Sign in with SoundCloud Sign in with Tumblr Sign in with Twitter Sign in with Vimeo Sign in with VK Sign in with Yahoo!
Example options

Icons only version

Available css social color class

Class name Service
btn-adn App.net
btn-bitbucket Bitbucket
btn-dropbox Dropbox
btn-facebook Facebook
btn-flickr Flickr
btn-foursquare Foursquare
btn-github Github
btn-google Google
btn-instagram Istagram
btn-linkedin LinkedIn
btn-microsoft Microsoft
btn-openid OpenID
btn-pinterest Pinterest
btn-reddit Reddit
btn-soundcloud Soundcloud
btn-tumblr Tumblr
btn-twitter Twitter
btn-vimeo Vimeo
btn-vk VK
btn-yahoo Yahoo
© 2019 Adminos By Refinethemes.com