Rich-React

React js UI example. inspinia buttons

React js UI example and template, inspinia buttons! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: buttons

Preview Code

1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:

npx create-react-app my-awesome-project

cd my-awesome-project

npm start

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install [email protected] --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  
	return (
		<div>
			<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row wrapper wrapper-content animated fadeInRight">
    <div class="col-md-4">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Colors buttons</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#/">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#/">Config option 1</a>
                        </li>
                        <li><a href="#/">Config option 2</a>
                        </li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <p>
                    Use any of the available button classes to quickly create a styled button.
                </p>

                <h3 class="font-bold">
                    Normal buttons
                </h3>
                <p>
                    <button type="button" class="btn btn-w-m btn-default">Default</button>
                    <button type="button" class="btn btn-w-m btn-primary">Primary</button>
                    <button type="button" class="btn btn-w-m btn-success">Success</button>
                    <button type="button" class="btn btn-w-m btn-info">Info</button>
                    <button type="button" class="btn btn-w-m btn-warning">Warning</button>
                    <button type="button" class="btn btn-w-m btn-danger">Danger</button>
                    <button type="button" class="btn btn-w-m btn-link">Link</button>
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Diferent size</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#/">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#/">Config option 1</a>
                        </li>
                        <li><a href="#/">Config option 2</a>
                        </li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <p>
               If You want larger or smaller buttons You can add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> class.
                </p>
                <h3 class="font-bold">Button Sizes</h3>
                <p>
                    <button type="button" class="btn btn-primary btn-lg">Large button</button>
                    <button type="button" class="btn btn-default btn-lg">Large button</button>
                    <br/>
                    <button type="button" class="btn btn-primary">Default button</button>
                    <button type="button" class="btn btn-default">Default button</button>
                    <br/>
                    <button type="button" class="btn btn-primary btn-sm">Small button</button>
                    <button type="button" class="btn btn-default btn-sm">Small button</button>
                    <br/>
                    <button type="button" class="btn btn-primary btn-xs">Mini button</button>
                    <button type="button" class="btn btn-default btn-xs">Mini button</button>
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Outline and Block Buttons</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#/">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#/">Config option 1</a>
                        </li>
                        <li><a href="#/">Config option 2</a>
                        </li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <p>
                    Create block level buttons or outline buttons, by adding <code>.btn-block</code>   or <code>.btn-outline</code>.
                </p>

                <h3 class="font-bold">Outline buttons</h3>
                <p>
                    <button type="button" class="btn btn-outline btn-default">Default</button>
                    <button type="button" class="btn btn-outline btn-primary">Primary</button>
                    <button type="button" class="btn btn-outline btn-success">Success</button>
                    <button type="button" class="btn btn-outline btn-info">Info</button>
                    <button type="button" class="btn btn-outline btn-warning">Warning</button>
                    <button type="button" class="btn btn-outline btn-danger">Danger</button>
                    <button type="button" class="btn btn-outline btn-link">Link</button>
                </p>
                <h3 class="font-bold">Block buttons</h3>
                <p>
                    <button type="button" class="btn btn-block btn-outline btn-primary">Primary</button>
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>3D Buttons</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#/">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#/">Config option 1</a>
                        </li>
                        <li><a href="#/">Config option 2</a>
                        </li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <p>
                    To add three diminsion to buttons You can add <code>.dim</code> class to button.
                </p>
                <h3 class="font-bold">Three diminsion button</h3>

                        <button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-money"></i></button>
                        <button class="btn btn-warning dim btn-large-dim" type="button"><i class="fa fa-warning"></i></button>
                        <button class="btn btn-danger  dim btn-large-dim" type="button"><i class="fa fa-heart"></i></button>
                        <button class="btn btn-primary  dim btn-large-dim" type="button"><i class="fa fa-dollar"></i>6</button>
                        <button class="btn btn-info  dim btn-large-dim btn-outline" type="button"><i class="fa fa-ruble"></i></button>
                        <button class="btn btn-primary dim" type="button"><i class="fa fa-money"></i></button>
                        <button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i></button>
                        <button class="btn btn-primary dim" type="button"><i class="fa fa-check"></i></button>
                        <button class="btn btn-success  dim" type="button"><i class="fa fa-upload"></i></button>
                        <button class="btn btn-info  dim" type="button"><i class="fa fa-paste"></i> </button>
                        <button class="btn btn-warning  dim" type="button"><i class="fa fa-warning"></i></button>
                        <button class="btn btn-default  dim " type="button"><i class="fa fa-star"></i></button>
                        <button class="btn btn-danger  dim " type="button"><i class="fa fa-heart"></i></button>

                        <button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-money"></i></button>
                        <button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i></button>
                        <button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-check"></i></button>
                        <button class="btn btn-outline btn-success  dim" type="button"><i class="fa fa-upload"></i></button>
                        <button class="btn btn-outline btn-info  dim" type="button"><i class="fa fa-paste"></i> </button>
                        <button class="btn btn-outline btn-warning  dim" type="button"><i class="fa fa-warning"></i></button>
                        <button class="btn btn-outline btn-danger  dim " type="button"><i class="fa fa-heart"></i></button>

            </div>
        </div>
    </div>
<div class="col-md-12">
    <div class="row">
        <div class="col-md-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Button dropdowns</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#/">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#/">Config option 1</a>
                            </li>
                            <li><a href="#/">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
            <div class="ibox-content">
                <p>
                    Droppdowns buttons are avalible with any color and any size.
                </p>

                <h3 class="font-bold">Dropdowns</h3>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#/">Action</a></li>
                        <li><a href="#/" class="font-bold">Another action</a></li>
                        <li><a href="#/">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#/">Separated link</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#/">Action</a></li>
                        <li><a href="#/">Another action</a></li>
                        <li><a href="#/">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#/">Separated link</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#/">Action</a></li>
                        <li><a href="#/">Another action</a></li>
                        <li><a href="#/">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#/">Separated link</a></li>
                    </ul>
                </div>

                <br/>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#/">Action</a></li>
                        <li><a href="#/">Another action</a></li>
                        <li><a href="#/">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#/">Separated link</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-warning btn-sm dropdown-toggle">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#/">Action</a></li>
                        <li><a href="#/">Another action</a></li>
                        <li><a href="#/">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#/">Separated link</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#/">Action</a></li>
                        <li><a href="#/">Another action</a></li>
                        <li><a href="#/">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#/">Separated link</a></li>
                    </ul>
                </div>
                <br/>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#/">Action</a></li>
                        <li><a href="#/">Another action</a></li>
                        <li><a href="#/">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#/">Separated link</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-warning btn-xs dropdown-toggle">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#/">Action</a></li>
                        <li><a href="#/">Another action</a></li>
                        <li><a href="#/">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#/">Separated link</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#/">Action</a></li>
                        <li><a href="#/">Another action</a></li>
                        <li><a href="#/">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#/">Separated link</a></li>
                    </ul>
                </div>
            </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Grouped Buttons</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#/">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#/">Config option 1</a>
                            </li>
                            <li><a href="#/">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <p>
                        This is a group of buttons, ideal for sytuation where many actions are related to same element.
                    </p>

                    <h3 class="font-bold">Button Group</h3>
                    <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/>
                    <div class="btn-group">
                        <button type="button" class="btn btn-white"><i class="fa fa-chevron-left"></i></button>
                        <button class="btn btn-white">1</button>
                        <button class="btn btn-white  active">2</button>
                        <button class="btn btn-white">3</button>
                        <button class="btn btn-white">4</button>
                        <button type="button" class="btn btn-white"><i class="fa fa-chevron-right"></i> </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Icon Buttons</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#/">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#/">Config option 1</a>
                    </li>
                    <li><a href="#/">Config option 2</a>
                    </li>
                </ul>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <p>
                To buttons with any color or any size you can add extra icon on the left or the right side.
            </p>

            <h3 class="font-bold">Commom Icon Buttons</h3>
            <p>
                <button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;Submit</button>
                <button class="btn btn-success " type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<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>&nbsp;&nbsp;Map</button>

                <a class="btn btn-success btn-facebook">
                    <i class="fa fa-facebook"> </i> Sign in with Facebook
                </a>
                <a class="btn btn-success btn-facebook btn-outline">
                    <i class="fa fa-facebook"> </i> Sign in with Facebook
                </a>
                <a class="btn btn-white btn-bitbucket">
                    <i class="fa fa-user-md"></i>
                </a>
                <a class="btn btn-white btn-bitbucket">
                    <i class="fa fa-group"></i>
                </a>
                <a class="btn btn-white btn-bitbucket">
                    <i class="fa fa-wrench"></i>
                </a>
                <a class="btn btn-white btn-bitbucket">
                    <i class="fa fa-exchange"></i>
                </a>
                <a class="btn btn-white btn-bitbucket">
                    <i class="fa fa-check-circle-o"></i>
                </a>
                <a class="btn btn-white btn-bitbucket">
                    <i class="fa fa-road"></i>
                </a>
                <a class="btn btn-white btn-bitbucket">
                    <i class="fa fa-ambulance"></i>
                </a>
                <a class="btn btn-white btn-bitbucket">
                    <i class="fa fa-star"></i> Stared
                </a>
            </p>

                <h3 class="font-bold">Toggle buttons Variations</h3>
                <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>
        </div>
    </div>
</div>
    <div class="col-md-12">
    <div class="row">
        <div class="col-md-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Circle Icon Buttons</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#/">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#/">Config option 1</a>
                            </li>
                            <li><a href="#/">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <p>
                        For buttons you can add <code>.btn-circle</code> to rounded buttons and make it circle.
                    </p>

                    <h3 class="font-bold">Circle buttons</h3>
                    <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>

                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Rounded Buttons</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#/">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#/">Config option 1</a>
                            </li>
                            <li><a href="#/">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <p>
                        You can also add <code>.btn-rounded</code> class to round buttons.
                    </p>

                    <h3 class="font-bold">Button Group</h3>
                    <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-primary btn-rounded btn-block" href="#/"><i class="fa fa-info-circle"></i> Block rounded with icon button</a>
                    </p>
                 </div>
            </div>
        </div>

    </div>
    </div>
</div>
</div>
		</div>
	);
}
export default App;

4. Now we need to add below code into our my-awesome-project/src/App.css file :

body{margin-top:20px;}
.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox.collapsed .ibox-content {
  display: none;
}
.ibox.collapsed .fa.fa-chevron-up:before {
  content: "\f078";
}
.ibox.collapsed .fa.fa-chevron-down:before {
  content: "\f077";
}
.ibox:after,
.ibox:before {
  display: table;
}
.ibox-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    text-align: right;
}
.ibox-tools a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4;
}
.ibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 3px 0 0;
  color: inherit;
  margin-bottom: 0;
  padding: 14px 15px 7px;
  min-height: 48px;
}
.ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.ibox-footer {
  color: inherit;
  border-top: 1px solid #e7eaec;
  font-size: 90%;
  background: #ffffff;
  padding: 10px 15px;
}


.btn {
  border-radius: 3px;
}
.float-e-margins .btn {
  margin-bottom: 5px;
}
.btn-w-m {
  min-width: 120px;
}
.btn-primary.btn-outline {
  color: #1ab394;
}
.btn-success.btn-outline {
  color: #1c84c6;
}
.btn-info.btn-outline {
  color: #23c6c8;
}
.btn-warning.btn-outline {
  color: #f8ac59;
}
.btn-danger.btn-outline {
  color: #ed5565;
}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
  color: #fff;
}
.btn-primary {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary.active:focus {
  background-color: #18a689;
  border-color: #18a689;
  color: #FFFFFF;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled.active,
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active,
.btn-primary.active[disabled],
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary.active {
  background-color: #1dc5a3;
  border-color: #1dc5a3;
}
.btn-success {
  background-color: #1c84c6;
  border-color: #1c84c6;
  color: #FFFFFF;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success,
.btn-success:active:focus,
.btn-success:active:hover,
.btn-success.active:hover,
.btn-success.active:focus {
  background-color: #1a7bb9;
  border-color: #1a7bb9;
  color: #FFFFFF;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success.disabled:hover,
.btn-success.disabled:focus,
.btn-success.disabled:active,
.btn-success.disabled.active,
.btn-success[disabled],
.btn-success[disabled]:hover,
.btn-success[disabled]:focus,
.btn-success[disabled]:active,
.btn-success.active[disabled],
fieldset[disabled] .btn-success,
fieldset[disabled] .btn-success:hover,
fieldset[disabled] .btn-success:focus,
fieldset[disabled] .btn-success:active,
fieldset[disabled] .btn-success.active {
  background-color: #1f90d8;
  border-color: #1f90d8;
}
.btn-info {
  background-color: #23c6c8;
  border-color: #23c6c8;
  color: #FFFFFF;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info,
.btn-info:active:focus,
.btn-info:active:hover,
.btn-info.active:hover,
.btn-info.active:focus {
  background-color: #21b9bb;
  border-color: #21b9bb;
  color: #FFFFFF;
}
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled,
.btn-info.disabled:hover,
.btn-info.disabled:focus,
.btn-info.disabled:active,
.btn-info.disabled.active,
.btn-info[disabled],
.btn-info[disabled]:hover,
.btn-info[disabled]:focus,
.btn-info[disabled]:active,
.btn-info.active[disabled],
fieldset[disabled] .btn-info,
fieldset[disabled] .btn-info:hover,
fieldset[disabled] .btn-info:focus,
fieldset[disabled] .btn-info:active,
fieldset[disabled] .btn-info.active {
  background-color: #26d7d9;
  border-color: #26d7d9;
}
.btn-default {
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default.active:focus {
  color: inherit;
  border: 1px solid #d2d2d2;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
}
.btn-default.disabled,
.btn-default.disabled:hover,
.btn-default.disabled:focus,
.btn-default.disabled:active,
.btn-default.disabled.active,
.btn-default[disabled],
.btn-default[disabled]:hover,
.btn-default[disabled]:focus,
.btn-default[disabled]:active,
.btn-default.active[disabled],
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default.active {
  color: #cacaca;
}
.btn-warning {
  background-color: #f8ac59;
  border-color: #f8ac59;
  color: #FFFFFF;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning,
.btn-warning:active:focus,
.btn-warning:active:hover,
.btn-warning.active:hover,
.btn-warning.active:focus {
  background-color: #f7a54a;
  border-color: #f7a54a;
  color: #FFFFFF;
}
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  background-image: none;
}
.btn-warning.disabled,
.btn-warning.disabled:hover,
.btn-warning.disabled:focus,
.btn-warning.disabled:active,
.btn-warning.disabled.active,
.btn-warning[disabled],
.btn-warning[disabled]:hover,
.btn-warning[disabled]:focus,
.btn-warning[disabled]:active,
.btn-warning.active[disabled],
fieldset[disabled] .btn-warning,
fieldset[disabled] .btn-warning:hover,
fieldset[disabled] .btn-warning:focus,
fieldset[disabled] .btn-warning:active,
fieldset[disabled] .btn-warning.active {
  background-color: #f9b66d;
  border-color: #f9b66d;
}
.btn-danger {
  background-color: #ed5565;
  border-color: #ed5565;
  color: #FFFFFF;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger,
.btn-danger:active:focus,
.btn-danger:active:hover,
.btn-danger.active:hover,
.btn-danger.active:focus {
  background-color: #ec4758;
  border-color: #ec4758;
  color: #FFFFFF;
}
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-image: none;
}
.btn-danger.disabled,
.btn-danger.disabled:hover,
.btn-danger.disabled:focus,
.btn-danger.disabled:active,
.btn-danger.disabled.active,
.btn-danger[disabled],
.btn-danger[disabled]:hover,
.btn-danger[disabled]:focus,
.btn-danger[disabled]:active,
.btn-danger.active[disabled],
fieldset[disabled] .btn-danger,
fieldset[disabled] .btn-danger:hover,
fieldset[disabled] .btn-danger:focus,
fieldset[disabled] .btn-danger:active,
fieldset[disabled] .btn-danger.active {
  background-color: #ef6776;
  border-color: #ef6776;
}
.btn-link {
  color: inherit;
}
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active,
.open .dropdown-toggle.btn-link {
  color: #1ab394;
  text-decoration: none;
}
.btn-link:active,
.btn-link.active,
.open .dropdown-toggle.btn-link {
  background-image: none;
}
.btn-link.disabled,
.btn-link.disabled:hover,
.btn-link.disabled:focus,
.btn-link.disabled:active,
.btn-link.disabled.active,
.btn-link[disabled],
.btn-link[disabled]:hover,
.btn-link[disabled]:focus,
.btn-link[disabled]:active,
.btn-link.active[disabled],
fieldset[disabled] .btn-link,
fieldset[disabled] .btn-link:hover,
fieldset[disabled] .btn-link:focus,
fieldset[disabled] .btn-link:active,
fieldset[disabled] .btn-link.active {
  color: #cacaca;
}
.btn-white {
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
}
.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white.active,
.open .dropdown-toggle.btn-white,
.btn-white:active:focus,
.btn-white:active:hover,
.btn-white.active:hover,
.btn-white.active:focus {
  color: inherit;
  border: 1px solid #d2d2d2;
}
.btn-white:active,
.btn-white.active {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
}
.btn-white:active,
.btn-white.active,
.open .dropdown-toggle.btn-white {
  background-image: none;
}
.btn-white.disabled,
.btn-white.disabled:hover,
.btn-white.disabled:focus,
.btn-white.disabled:active,
.btn-white.disabled.active,
.btn-white[disabled],
.btn-white[disabled]:hover,
.btn-white[disabled]:focus,
.btn-white[disabled]:active,
.btn-white.active[disabled],
fieldset[disabled] .btn-white,
fieldset[disabled] .btn-white:hover,
fieldset[disabled] .btn-white:focus,
fieldset[disabled] .btn-white:active,
fieldset[disabled] .btn-white.active {
  color: #cacaca;
}
.form-control,
.form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus,
.navbar-collapse,
.navbar-form,
.navbar-form-custom .form-control:focus,
.navbar-form-custom .form-control:hover,
.open .btn.dropdown-toggle,
.panel,
.popover,
.progress,
.progress-bar {
  box-shadow: none;
}
.btn-outline {
  color: inherit;
  background-color: transparent;
  transition: all .5s;
}
.btn-rounded {
  border-radius: 50px;
}
.btn-large-dim {
  width: 90px;
  height: 90px;
  font-size: 42px;
}
button.dim {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding-top: 6px;
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 600;
  margin-bottom: 20px !important;
}
button.dim:active {
  top: 3px;
}
button.btn-primary.dim {
  box-shadow: inset 0 0 0 #16987e, 0 5px 0 0 #16987e, 0 10px 5px #999999;
}
button.btn-primary.dim:active {
  box-shadow: inset 0 0 0 #16987e, 0 2px 0 0 #16987e, 0 5px 3px #999999;
}
button.btn-default.dim {
  box-shadow: inset 0 0 0 #b3b3b3, 0 5px 0 0 #b3b3b3, 0 10px 5px #999999;
}
button.btn-default.dim:active {
  box-shadow: inset 0 0 0 #b3b3b3, 0 2px 0 0 #b3b3b3, 0 5px 3px #999999;
}
button.btn-warning.dim {
  box-shadow: inset 0 0 0 #f79d3c, 0 5px 0 0 #f79d3c, 0 10px 5px #999999;
}
button.btn-warning.dim:active {
  box-shadow: inset 0 0 0 #f79d3c, 0 2px 0 0 #f79d3c, 0 5px 3px #999999;
}
button.btn-info.dim {
  box-shadow: inset 0 0 0 #1eacae, 0 5px 0 0 #1eacae, 0 10px 5px #999999;
}
button.btn-info.dim:active {
  box-shadow: inset 0 0 0 #1eacae, 0 2px 0 0 #1eacae, 0 5px 3px #999999;
}
button.btn-success.dim {
  box-shadow: inset 0 0 0 #1872ab, 0 5px 0 0 #1872ab, 0 10px 5px #999999;
}
button.btn-success.dim:active {
  box-shadow: inset 0 0 0 #1872ab, 0 2px 0 0 #1872ab, 0 5px 3px #999999;
}
button.btn-danger.dim {
  box-shadow: inset 0 0 0 #ea394c, 0 5px 0 0 #ea394c, 0 10px 5px #999999;
}
button.btn-danger.dim:active {
  box-shadow: inset 0 0 0 #ea394c, 0 2px 0 0 #ea394c, 0 5px 3px #999999;
}
button.dim:before {
  font-size: 50px;
  line-height: 1em;
  font-weight: normal;
  color: #fff;
  display: block;
  padding-top: 10px;
}
button.dim:active:before {
  top: 7px;
  font-size: 50px;
}
.btn:focus {
  outline: none !important;
}

Similar snippets

Find more similar snippets using the following tags:buttons

React js template and ui example Colored Social icons

Colored Social icons

View
React js template and ui example unify buttons

unify buttons

View
React js template and ui example Bootstrap 3 Toggle Switch buttons

Bootstrap 3 Toggle Switch buttons

View
React js template and ui example Angle buttons

Angle buttons

View
React js template and ui example bs5 dark footer

bs5 dark footer

View
React js template and ui example 2 step verification form inside a card

2 step verification form inside a card

View
React js template and ui example contact page section

contact page section

View
React js template and ui example bs4 timeline color row

bs4 timeline color row

View