Frontend Free Code
Frontend Free Code
Developers Codes
Graphics Photo
Crypto World
Code Tutorial
Javascript Codes
Home Home How to How to use Sitemap Sitemap About us About Us Suggested Posts Suggested Privacy Policy Privacy Policy

Feel The Power


content logo

Bootstrap Buttons:

Simple Fancy Effects for Bootstrap Default Buttons

Previous CodePrevious Code Next CodeNext Code

One of the biggest challenges of designing a website is choosing the right themes and styles for the different features and especially buttons. What you choose for the button depends heavily on the purpose of the button, the guidelines and the platform you are designing it for.

In this post, we have a code for 5 different styles of buttons. These buttons are mostly fancy and are great if your website’s theme involves a lot of colourful features and fonts. The first group includes Bootstrap flat buttons with different colours and sizes. The second one involves Bootstrap fancy buttons which are a bit more advanced and look 3D. they are also available in different colours and sizes. The third batch are buttons with hover effects. They have a light shine effect on them which is removed once you hover your mouse over the button. the fourth group are round buttons with no effects but the shapes are more interesting than the basic rectangle buttons. The last group contains ghost outlined buttons. They have transparent backgrounds but it will turn solid in hover mode. You can get this pack of Bootstrap edge buttons and other stylish ones for absolutely no fees as our codes are completely free of charge.

#

Bootstrap Fancy Button

#

Bootstrap Flat Button

#

Bootstrap Edge Button

#

Round Button

<!-- This script got from frontendfreecode.com -->
<div class="container wrapper">
    <div class="masthead">
        <nav class="navbar">
            <ul class="nav nav-justified margin-top">
                <li class="active"><a href="#default">Flat</a></li>
                <li><a href="#fancy">Fancy</a></li>
                <li><a href="#edge">Edge</a></li>
                <li><a href="#round">Round</a></li>
                <li><a href="#ghost">Ghost</a></li>
                <li><a href="#buttons" target="_top">Help</a></li>
            </ul>
        </nav>
    </div><!-- /Nav -->
    <div class="row content">
        <section id="default" class="col-sm-12">
            <div class="content-inner">
                <div class="page-header">
                    <h2 class="page-title">
                        Flat
                        <small>Bootstrap3 default buttons</small>
                    </h2>
                    <a href="#top" class="to-top pull-right"><i class="fa fa-chevron-up"></i> <span>Top</span></a>
                </div><!-- /.page-header -->
                <dl>
                    <dt>.btn-lg</dt>
                    <dd>
                        <button class="btn btn-lg btn-default" type="button">Default</button>
                        <button class="btn btn-lg btn-primary" type="button">Primary</button>
                        <button class="btn btn-lg btn-success" type="button">Success</button>
                        <button class="btn btn-lg btn-info" type="button">Info</button>
                        <button class="btn btn-lg btn-warning" type="button">Warning</button>
                        <button class="btn btn-lg btn-danger" type="button">Danger</button>
                        <button class="btn btn-lg btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-lg btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn</dt>
                    <dd>
                        <button class="btn btn-default" type="button">Default</button>
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-sm</dt>
                    <dd>
                        <button class="btn btn-sm btn-default" type="button">Default</button>
                        <button class="btn btn-sm btn-primary" type="button">Primary</button>
                        <button class="btn btn-sm btn-success" type="button">Success</button>
                        <button class="btn btn-sm btn-info" type="button">Info</button>
                        <button class="btn btn-sm btn-warning" type="button">Warning</button>
                        <button class="btn btn-sm btn-danger" type="button">Danger</button>
                        <button class="btn btn-sm btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-sm btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-xs</dt>
                    <dd>
                        <button class="btn btn-xs btn-default" type="button">Default</button>
                        <button class="btn btn-xs btn-primary" type="button">Primary</button>
                        <button class="btn btn-xs btn-success" type="button">Success</button>
                        <button class="btn btn-xs btn-info" type="button">Info</button>
                        <button class="btn btn-xs btn-warning" type="button">Warning</button>
                        <button class="btn btn-xs btn-danger" type="button">Danger</button>
                        <button class="btn btn-xs btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-xs btn-link" type="button">Link</button>
                    </dd>
                    <dt>Disabled</dt>
                    <dd>
                        <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-primary" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-success" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-info" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-warning" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-danger" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-inverse" disabled="disabled">Inverse</button>
                        <button type="button" class="btn btn-link" disabled="disabled">Button</button>
                    </dd>
                </dl>
            </div><!-- /.content-inner -->
        </section><!-- /#default -->
        <section id="fancy" class="col-sm-12">
            <div class="content-inner">

                <div class="page-header">
                    <h2 class="page-title">
                        Fancy
                        <small>Fancy buttons with gradient</small>
                    </h2>
                    <a href="#top" class="to-top pull-right"><i class="fa fa-chevron-up"></i> <span>Top</span></a>
                </div><!-- /.page-header -->
                <dl>
                    <dt>.btn-lg</dt>
                    <dd>
                        <button class="btn btn-lg btn-default" type="button">Default</button>
                        <button class="btn btn-lg btn-primary" type="button">Primary</button>
                        <button class="btn btn-lg btn-success" type="button">Success</button>
                        <button class="btn btn-lg btn-info" type="button">Info</button>
                        <button class="btn btn-lg btn-warning" type="button">Warning</button>
                        <button class="btn btn-lg btn-danger" type="button">Danger</button>
                        <button class="btn btn-lg btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-lg btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn</dt>
                    <dd>
                        <button class="btn btn-default" type="button">Default</button>
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-sm</dt>
                    <dd>
                        <button class="btn btn-sm btn-default" type="button">Default</button>
                        <button class="btn btn-sm btn-primary" type="button">Primary</button>
                        <button class="btn btn-sm btn-success" type="button">Success</button>
                        <button class="btn btn-sm btn-info" type="button">Info</button>
                        <button class="btn btn-sm btn-warning" type="button">Warning</button>
                        <button class="btn btn-sm btn-danger" type="button">Danger</button>
                        <button class="btn btn-sm btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-sm btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-xs</dt>
                    <dd>
                        <button class="btn btn-xs btn-default" type="button">Default</button>
                        <button class="btn btn-xs btn-primary" type="button">Primary</button>
                        <button class="btn btn-xs btn-success" type="button">Success</button>
                        <button class="btn btn-xs btn-info" type="button">Info</button>
                        <button class="btn btn-xs btn-warning" type="button">Warning</button>
                        <button class="btn btn-xs btn-danger" type="button">Danger</button>
                        <button class="btn btn-xs btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-xs btn-link" type="button">Link</button>
                    </dd>
                    <dt>Disabled</dt>
                    <dd>
                        <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-primary" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-success" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-info" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-warning" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-danger" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-inverse" disabled="disabled">Inverse</button>
                        <button type="button" class="btn btn-link" disabled="disabled">Button</button>
                    </dd>
                </dl>
            </div><!-- /.content-inner -->
        </section><!-- /#fancy -->
        <section id="edge" class="col-sm-12">
            <div class="content-inner">
                <div class="page-header">
                    <h2 class="page-title">
                        Edge
                        <small>Bold &amp; strong</small>
                    </h2>
                    <a href="#top" class="to-top pull-right"><i class="fa fa-chevron-up"></i> <span>Top</span></a>
                </div><!-- /.page-header -->
                <dl>
                    <dt>.btn-lg</dt>
                    <dd>
                        <button class="btn btn-lg btn-default" type="button">Default</button>
                        <button class="btn btn-lg btn-primary" type="button">Primary</button>
                        <button class="btn btn-lg btn-success" type="button">Success</button>
                        <button class="btn btn-lg btn-info" type="button">Info</button>
                        <button class="btn btn-lg btn-warning" type="button">Warning</button>
                        <button class="btn btn-lg btn-danger" type="button">Danger</button>
                        <button class="btn btn-lg btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-lg btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn</dt>
                    <dd>
                        <button class="btn btn-default" type="button">Default</button>
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-sm</dt>
                    <dd>
                        <button class="btn btn-sm btn-default" type="button">Default</button>
                        <button class="btn btn-sm btn-primary" type="button">Primary</button>
                        <button class="btn btn-sm btn-success" type="button">Success</button>
                        <button class="btn btn-sm btn-info" type="button">Info</button>
                        <button class="btn btn-sm btn-warning" type="button">Warning</button>
                        <button class="btn btn-sm btn-danger" type="button">Danger</button>
                        <button class="btn btn-sm btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-sm btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-xs</dt>
                    <dd>
                        <button class="btn btn-xs btn-default" type="button">Default</button>
                        <button class="btn btn-xs btn-primary" type="button">Primary</button>
                        <button class="btn btn-xs btn-success" type="button">Success</button>
                        <button class="btn btn-xs btn-info" type="button">Info</button>
                        <button class="btn btn-xs btn-warning" type="button">Warning</button>
                        <button class="btn btn-xs btn-danger" type="button">Danger</button>
                        <button class="btn btn-xs btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-xs btn-link" type="button">Link</button>
                    </dd>
                    <dt>Disabled</dt>
                    <dd>
                        <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-primary" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-success" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-info" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-warning" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-danger" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-inverse" disabled="disabled">Inverse</button>
                        <button type="button" class="btn btn-link" disabled="disabled">Button</button>
                    </dd>
                </dl>
            </div><!-- /.content-inner -->
        </section><!-- /#Edge -->
        <section id="round" class="col-sm-12">
            <div class="content-inner">

                <div class="page-header">
                    <h2 class="page-title">
                        Round
                        <small>Round buttons</small>
                    </h2>
                    <a href="#top" class="to-top pull-right"><i class="fa fa-chevron-up"></i> <span>Top</span></a>
                </div><!-- /.page-header -->
                <dl>
                    <dt>.btn-lg</dt>
                    <dd>
                        <button class="btn btn-lg btn-default" type="button">Default</button>
                        <button class="btn btn-lg btn-primary" type="button">Primary</button>
                        <button class="btn btn-lg btn-success" type="button">Success</button>
                        <button class="btn btn-lg btn-info" type="button">Info</button>
                        <button class="btn btn-lg btn-warning" type="button">Warning</button>
                        <button class="btn btn-lg btn-danger" type="button">Danger</button>
                        <button class="btn btn-lg btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-lg btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn</dt>
                    <dd>
                        <button class="btn btn-default" type="button">Default</button>
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-sm</dt>
                    <dd>
                        <button class="btn btn-sm btn-default" type="button">Default</button>
                        <button class="btn btn-sm btn-primary" type="button">Primary</button>
                        <button class="btn btn-sm btn-success" type="button">Success</button>
                        <button class="btn btn-sm btn-info" type="button">Info</button>
                        <button class="btn btn-sm btn-warning" type="button">Warning</button>
                        <button class="btn btn-sm btn-danger" type="button">Danger</button>
                        <button class="btn btn-sm btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-sm btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-xs</dt>
                    <dd>
                        <button class="btn btn-xs btn-default" type="button">Default</button>
                        <button class="btn btn-xs btn-primary" type="button">Primary</button>
                        <button class="btn btn-xs btn-success" type="button">Success</button>
                        <button class="btn btn-xs btn-info" type="button">Info</button>
                        <button class="btn btn-xs btn-warning" type="button">Warning</button>
                        <button class="btn btn-xs btn-danger" type="button">Danger</button>
                        <button class="btn btn-xs btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-xs btn-link" type="button">Link</button>
                    </dd>
                    <hr>
                    <dt>Disabled</dt>
                    <dd>
                        <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-primary" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-success" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-info" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-warning" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-danger" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-inverse" disabled="disabled">Inverse</button>
                        <button type="button" class="btn btn-link" disabled="disabled">Button</button>
                    </dd>
                </dl>
            </div><!-- /.content-inner -->
        </section><!-- /#round-->
        <section id="ghost" class="col-sm-12">
            <div class="content-inner">
                <div class="page-header">
                    <h2 class="page-title">
                        Ghost
                        <small>Outlined</small>
                    </h2>
                    <a href="#top" class="to-top pull-right"><i class="fa fa-chevron-up"></i> <span>Top</span></a>
                </div><!-- /.page-header -->
                <dl>
                    <dt>.btn-lg</dt>
                    <dd>
                        <button class="btn btn-lg btn-default" type="button">Default</button>
                        <button class="btn btn-lg btn-primary" type="button">Primary</button>
                        <button class="btn btn-lg btn-success" type="button">Success</button>
                        <button class="btn btn-lg btn-info" type="button">Info</button>
                        <button class="btn btn-lg btn-warning" type="button">Warning</button>
                        <button class="btn btn-lg btn-danger" type="button">Danger</button>
                        <button class="btn btn-lg btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-lg btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn</dt>
                    <dd>
                        <button class="btn btn-default" type="button">Default</button>
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-sm</dt>
                    <dd>
                        <button class="btn btn-sm btn-default" type="button">Default</button>
                        <button class="btn btn-sm btn-primary" type="button">Primary</button>
                        <button class="btn btn-sm btn-success" type="button">Success</button>
                        <button class="btn btn-sm btn-info" type="button">Info</button>
                        <button class="btn btn-sm btn-warning" type="button">Warning</button>
                        <button class="btn btn-sm btn-danger" type="button">Danger</button>
                        <button class="btn btn-sm btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-sm btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-xs</dt>
                    <dd>
                        <button class="btn btn-xs btn-default" type="button">Default</button>
                        <button class="btn btn-xs btn-primary" type="button">Primary</button>
                        <button class="btn btn-xs btn-success" type="button">Success</button>
                        <button class="btn btn-xs btn-info" type="button">Info</button>
                        <button class="btn btn-xs btn-warning" type="button">Warning</button>
                        <button class="btn btn-xs btn-danger" type="button">Danger</button>
                        <button class="btn btn-xs btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-xs btn-link" type="button">Link</button>
                    </dd>
                    <dt>Disabled</dt>
                    <dd>
                        <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-primary" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-success" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-info" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-warning" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-danger" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-inverse" disabled="disabled">Inverse</button>
                        <button type="button" class="btn btn-link" disabled="disabled">Button</button>
                    </dd>
                </dl>
            </div><!-- /.content-inner -->
        </section><!-- /#ghost -->
    </div><!-- /Content -->
</div><!-- /Wrapper -->
<a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.margin-top{
    margin-top:10px;
}
/* Base colour */
.btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
  background-color: #f5f5f5 !important;
}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background-color: #006dcc !important;
}
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
  background-color: #5bb75b !important;
}
.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
  background-color: #49afcd !important;
}
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
  background-color: #faa732 !important;
}
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
  background-color: #da4f49 !important;
}
.btn-inverse, .btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active {
  background-color: #363636 !important;
}
/* Hover */
.btn-default:hover {
  background-color: white !important;
}
.btn-primary:hover {
  background-color: #0088ff !important;
}
.btn-info:hover {
  background-color: #71c1d8 !important;
}
.btn-success:hover {
  background-color: #7ec77e !important;
}
.btn-warning:hover {
  background-color: #fbbc64 !important;
}
.btn-danger:hover {
  background-color: #e37873 !important;
}
.btn-inverse:hover {
  background-color: #505050 !important;
}
#fancy .btn {
  /* Gradient global */
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3), transparent, rgba(0, 0, 0, 0.13));
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent, rgba(0, 0, 0, 0.13));
  /* Shadow */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 1px rgba(0, 0, 0, 0.075);
  /* Text-shadow */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  /* Border */
  border-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.5) !important;
}

#edge .btn {
  border-radius: 0;
  border-bottom: 3px solid;
  overflow: hidden;
  position: relative;
}
#edge .btn:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-top: 33px solid rgba(255, 255, 255, 0.4);
  border-right: 40px solid transparent;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  transition: all 200ms ease;
  -moz-transform: scale(0.9999);
  /* FF rough edge fix */
}
#edge .btn-lg:before {
  border-top-width: 45px;
  border-right-width: 60px;
}
#edge .btn-sm:before {
  border-top-width: 30px;
  border-right-width: 35px;
}
#edge .btn-xs:before {
  border-top-width: 20px;
  border-right-width: 26px;
}
#edge .btn-link:before {
  display: none;
}
#edge .btn:hover:before {
  left: -100px;
}
#edge .btn-default {
  border-color: #b5b5b5;
}
#edge .btn-primary {
  border-color: #00294d;
}
#edge .btn-info {
  border-color: #206376;
}
#edge .btn-success {
  border-color: #2d662d;
}
#edge .btn-warning {
  border-color: #a86404;
}
#edge .btn-danger {
  border-color: #88201c;
}
#edge .btn-inverse {
  border-color: black;
}

#round .btn {
  border-radius: 250px;
}

#ghost .content-inner {
  background: #404040;
  color: #faa732;
  box-shadow: 0 1px 0 #000 inset, 0 1px 1px #000;
}
#ghost .page-header {
  background: #222;
  border-color: #000;
}
#ghost .btn {
  background: transparent !important;
  border-width: 2px;
  border-radius: 0;
}
#ghost .btn-default {
  color: black;
  border-color: black;
}
#ghost .btn-default:hover {
  background: black !important;
  color: white;
}
#ghost .btn-primary {
  color: #006dcc;
  border-color: #006dcc;
}
#ghost .btn-primary:hover {
  background: #006dcc !important;
  color: white;
}
#ghost .btn-info {
  color: #49afcd;
  border-color: #49afcd;
}
#ghost .btn-info:hover {
  background: #49afcd !important;
  color: white;
}
#ghost .btn-success {
  color: #5bb75b;
  border-color: #5bb75b;
}
#ghost .btn-success:hover {
  background: #5bb75b !important;
  color: white;
}
#ghost .btn-warning {
  color: #faa732;
  border-color: #faa732;
}
#ghost .btn-warning:hover {
  background: #faa732 !important;
  color: white;
}
#ghost .btn-danger {
  color: #da4f49;
  border-color: #da4f49;
}
#ghost .btn-danger:hover {
  background: #da4f49 !important;
  color: white;
}
#ghost .btn-inverse {
  color: white;
  border-color: white;
}
#ghost .btn-inverse:hover {
  background: white !important;
  color: black;
}
.btn-inverse,
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse:focus {
  color: #fff;
}
.btn.btn-link {
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Layout */
html {
  font-size: 100%;
  font-size: 16px;
  -webkit-font-smoothing: subpixel-antialiased;
}
body {
  font-size: 1rem;
  font-family: "Montserrat", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  word-break: break-word;
  background: #3a9bd9;
}
/* Footer */
.site-footer {
  background: #333;
  color: #fff;
  height: 100px;
  text-align: center;
  padding: 30px 0 100px;
}
.site-footer p, .site-footer a {
  color: #e9eef2 !important;
}
/* Div card style */
.content-inner {
  background: #fff;
  padding: 30px;
}
.navbar .nav,
.content-inner {
  box-shadow: 2px 3px 0 2px #9fabb3, 0 0 0 1px #e9eef2;
  border-radius: 6px;
  margin-bottom: 30px;
}
/* Nav */
.navbar .nav {
  background: #fafafa;
  min-height: 40px;
}
.nav > li > a {
  display: block;
  float: none;
  padding: 15px;
  color: #777;
  text-transform: uppercase;
  text-shadow: none;
}
.nav > li > a:focus,
.nav > li > a:hover {
  background-color: #e9eef2;
  color: #5e5e5e;
}
.nav > .active > a,
.nav > .active > a:active,
.nav > .active > a:hover,
.nav > .active > a:focus {
  background-color: #e9eef2;
  color: #5e5e5e;
}
.nav > li:first-child > a {
  border-radius: 6px 0 0 6px;
}
.nav > li:last-child > a {
  border-radius: 0 6px 6px 0;
}
/* Page Header */
.page-header {
  background: #e9eef2;
  margin: -30px -30px 30px !important;
  padding: 20px 30px;
  border-radius: 6px 6px 0 0;
}
.page-title {
  margin: 0;
}
.page-header small {
  color: #9fabb3;
}
/* Link */
a, a:focus, a:active, a:hover {
  zoom: 1;
  text-decoration: none;
  cursor: pointer;
}
a, a:focus {
  color: #006dcc;
}
a:active {
  color: #005299;
}
a:hover {
  color: #0088ff;
}
/* --------------------------------
   Elements 
----------------------------------- */
h1.site-title {
  color: #fff;
  padding: 30px 0;
}
p {
  color: #333;
}
/* Scroll to top */
a.to-top {
  display: block;
  margin: -30px 0 0;
  color: #9dbccf;
}
a.to-top span {
  display: none;
}
/* List */
.content-inner {
  /* /media */
}
.content-inner dl dt {
  width: 10%;
  float: left;
  font-weight: bold;
  display: inline-block;
}
.content-inner dl dd {
  width: 90%;
  display: inline-block;
}
.content-inner dt, .content-inner dd {
  line-height: 70px;
}
@media (max-width: 992px) {
  .content-inner dt, .content-inner dd {
    width: 100% !important;
  }
  .content-inner dt {
    line-height: 30px !important;
  }
  .content-inner dd {
    line-height: 55px !important;
    margin-bottom: 20px;
  }
}
/* /content-inner */
/* Responsive */
@media (max-width: 767px) {
.site-title,
.site-footer p {
    width: 100%;
    text-align: center;
  }
}
/* --------------------------------
   Scaffolding 
----------------------------------- */
/* Remove Firefox selection dot */
a, a:focus, a:active, a:hover, object, embed, :focus {
  outline: none !important;
}
:-moz-any-link:focus {
  outline: none;
}
input::-moz-focus-inner {
  border: 0;
}
/* Remove Firefox Dropdown selection dot */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
/* Image */
iframe, a img {
  border: none;
}
/* SELECTED TEXT */
::selection {
  background: #ff5e99;
  color: #FFFFFF;
}
::-moz-selection {
  background: #ff5e99;
  color: #FFFFFF;
}
/* Animation */
.site-title,
.navbar nav,
.nav li a,
.site-footer a,
.btn {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  transition: all 200ms ease;
  /* Webkit flickering bug fix */
  -webkit-transform: translate3d(0, 0, 0);
}
$(document).ready(function () {
    $('.nav a').smoothScroll({ offset: -73 });
    $('.back-top a').smoothScroll({ offset: -100 });
    $('.content-inner .to-top').smoothScroll({ offset: 0 });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.5.5/jquery.smooth-scroll.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.5.5/jquery.smooth-scroll.min.js'></script>
<style>
.margin-top{
    margin-top:10px;
}
/* Base colour */
.btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
  background-color: #f5f5f5 !important;
}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background-color: #006dcc !important;
}
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
  background-color: #5bb75b !important;
}
.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
  background-color: #49afcd !important;
}
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
  background-color: #faa732 !important;
}
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
  background-color: #da4f49 !important;
}
.btn-inverse, .btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active {
  background-color: #363636 !important;
}
/* Hover */
.btn-default:hover {
  background-color: white !important;
}
.btn-primary:hover {
  background-color: #0088ff !important;
}
.btn-info:hover {
  background-color: #71c1d8 !important;
}
.btn-success:hover {
  background-color: #7ec77e !important;
}
.btn-warning:hover {
  background-color: #fbbc64 !important;
}
.btn-danger:hover {
  background-color: #e37873 !important;
}
.btn-inverse:hover {
  background-color: #505050 !important;
}
#fancy .btn {
  /* Gradient global */
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3), transparent, rgba(0, 0, 0, 0.13));
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent, rgba(0, 0, 0, 0.13));
  /* Shadow */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 1px rgba(0, 0, 0, 0.075);
  /* Text-shadow */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  /* Border */
  border-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.5) !important;
}

#edge .btn {
  border-radius: 0;
  border-bottom: 3px solid;
  overflow: hidden;
  position: relative;
}
#edge .btn:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-top: 33px solid rgba(255, 255, 255, 0.4);
  border-right: 40px solid transparent;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  transition: all 200ms ease;
  -moz-transform: scale(0.9999);
  /* FF rough edge fix */
}
#edge .btn-lg:before {
  border-top-width: 45px;
  border-right-width: 60px;
}
#edge .btn-sm:before {
  border-top-width: 30px;
  border-right-width: 35px;
}
#edge .btn-xs:before {
  border-top-width: 20px;
  border-right-width: 26px;
}
#edge .btn-link:before {
  display: none;
}
#edge .btn:hover:before {
  left: -100px;
}
#edge .btn-default {
  border-color: #b5b5b5;
}
#edge .btn-primary {
  border-color: #00294d;
}
#edge .btn-info {
  border-color: #206376;
}
#edge .btn-success {
  border-color: #2d662d;
}
#edge .btn-warning {
  border-color: #a86404;
}
#edge .btn-danger {
  border-color: #88201c;
}
#edge .btn-inverse {
  border-color: black;
}

#round .btn {
  border-radius: 250px;
}

#ghost .content-inner {
  background: #404040;
  color: #faa732;
  box-shadow: 0 1px 0 #000 inset, 0 1px 1px #000;
}
#ghost .page-header {
  background: #222;
  border-color: #000;
}
#ghost .btn {
  background: transparent !important;
  border-width: 2px;
  border-radius: 0;
}
#ghost .btn-default {
  color: black;
  border-color: black;
}
#ghost .btn-default:hover {
  background: black !important;
  color: white;
}
#ghost .btn-primary {
  color: #006dcc;
  border-color: #006dcc;
}
#ghost .btn-primary:hover {
  background: #006dcc !important;
  color: white;
}
#ghost .btn-info {
  color: #49afcd;
  border-color: #49afcd;
}
#ghost .btn-info:hover {
  background: #49afcd !important;
  color: white;
}
#ghost .btn-success {
  color: #5bb75b;
  border-color: #5bb75b;
}
#ghost .btn-success:hover {
  background: #5bb75b !important;
  color: white;
}
#ghost .btn-warning {
  color: #faa732;
  border-color: #faa732;
}
#ghost .btn-warning:hover {
  background: #faa732 !important;
  color: white;
}
#ghost .btn-danger {
  color: #da4f49;
  border-color: #da4f49;
}
#ghost .btn-danger:hover {
  background: #da4f49 !important;
  color: white;
}
#ghost .btn-inverse {
  color: white;
  border-color: white;
}
#ghost .btn-inverse:hover {
  background: white !important;
  color: black;
}
.btn-inverse,
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse:focus {
  color: #fff;
}
.btn.btn-link {
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Layout */
html {
  font-size: 100%;
  font-size: 16px;
  -webkit-font-smoothing: subpixel-antialiased;
}
body {
  font-size: 1rem;
  font-family: "Montserrat", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  word-break: break-word;
  background: #3a9bd9;
}
/* Footer */
.site-footer {
  background: #333;
  color: #fff;
  height: 100px;
  text-align: center;
  padding: 30px 0 100px;
}
.site-footer p, .site-footer a {
  color: #e9eef2 !important;
}
/* Div card style */
.content-inner {
  background: #fff;
  padding: 30px;
}
.navbar .nav,
.content-inner {
  box-shadow: 2px 3px 0 2px #9fabb3, 0 0 0 1px #e9eef2;
  border-radius: 6px;
  margin-bottom: 30px;
}
/* Nav */
.navbar .nav {
  background: #fafafa;
  min-height: 40px;
}
.nav > li > a {
  display: block;
  float: none;
  padding: 15px;
  color: #777;
  text-transform: uppercase;
  text-shadow: none;
}
.nav > li > a:focus,
.nav > li > a:hover {
  background-color: #e9eef2;
  color: #5e5e5e;
}
.nav > .active > a,
.nav > .active > a:active,
.nav > .active > a:hover,
.nav > .active > a:focus {
  background-color: #e9eef2;
  color: #5e5e5e;
}
.nav > li:first-child > a {
  border-radius: 6px 0 0 6px;
}
.nav > li:last-child > a {
  border-radius: 0 6px 6px 0;
}
/* Page Header */
.page-header {
  background: #e9eef2;
  margin: -30px -30px 30px !important;
  padding: 20px 30px;
  border-radius: 6px 6px 0 0;
}
.page-title {
  margin: 0;
}
.page-header small {
  color: #9fabb3;
}
/* Link */
a, a:focus, a:active, a:hover {
  zoom: 1;
  text-decoration: none;
  cursor: pointer;
}
a, a:focus {
  color: #006dcc;
}
a:active {
  color: #005299;
}
a:hover {
  color: #0088ff;
}
/* --------------------------------
   Elements 
----------------------------------- */
h1.site-title {
  color: #fff;
  padding: 30px 0;
}
p {
  color: #333;
}
/* Scroll to top */
a.to-top {
  display: block;
  margin: -30px 0 0;
  color: #9dbccf;
}
a.to-top span {
  display: none;
}
/* List */
.content-inner {
  /* /media */
}
.content-inner dl dt {
  width: 10%;
  float: left;
  font-weight: bold;
  display: inline-block;
}
.content-inner dl dd {
  width: 90%;
  display: inline-block;
}
.content-inner dt, .content-inner dd {
  line-height: 70px;
}
@media (max-width: 992px) {
  .content-inner dt, .content-inner dd {
    width: 100% !important;
  }
  .content-inner dt {
    line-height: 30px !important;
  }
  .content-inner dd {
    line-height: 55px !important;
    margin-bottom: 20px;
  }
}
/* /content-inner */
/* Responsive */
@media (max-width: 767px) {
.site-title,
.site-footer p {
    width: 100%;
    text-align: center;
  }
}
/* --------------------------------
   Scaffolding 
----------------------------------- */
/* Remove Firefox selection dot */
a, a:focus, a:active, a:hover, object, embed, :focus {
  outline: none !important;
}
:-moz-any-link:focus {
  outline: none;
}
input::-moz-focus-inner {
  border: 0;
}
/* Remove Firefox Dropdown selection dot */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
/* Image */
iframe, a img {
  border: none;
}
/* SELECTED TEXT */
::selection {
  background: #ff5e99;
  color: #FFFFFF;
}
::-moz-selection {
  background: #ff5e99;
  color: #FFFFFF;
}
/* Animation */
.site-title,
.navbar nav,
.nav li a,
.site-footer a,
.btn {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  transition: all 200ms ease;
  /* Webkit flickering bug fix */
  -webkit-transform: translate3d(0, 0, 0);
}
</style>

</head>
<body>
<div class="container wrapper">
    <div class="masthead">
        <nav class="navbar">
            <ul class="nav nav-justified margin-top">
                <li class="active"><a href="#default">Flat</a></li>
                <li><a href="#fancy">Fancy</a></li>
                <li><a href="#edge">Edge</a></li>
                <li><a href="#round">Round</a></li>
                <li><a href="#ghost">Ghost</a></li>
                <li><a href="#buttons" target="_top">Help</a></li>
            </ul>
        </nav>
    </div><!-- /Nav -->
    <div class="row content">
        <section id="default" class="col-sm-12">
            <div class="content-inner">
                <div class="page-header">
                    <h2 class="page-title">
                        Flat
                        <small>Bootstrap3 default buttons</small>
                    </h2>
                    <a href="#top" class="to-top pull-right"><i class="fa fa-chevron-up"></i> <span>Top</span></a>
                </div><!-- /.page-header -->
                <dl>
                    <dt>.btn-lg</dt>
                    <dd>
                        <button class="btn btn-lg btn-default" type="button">Default</button>
                        <button class="btn btn-lg btn-primary" type="button">Primary</button>
                        <button class="btn btn-lg btn-success" type="button">Success</button>
                        <button class="btn btn-lg btn-info" type="button">Info</button>
                        <button class="btn btn-lg btn-warning" type="button">Warning</button>
                        <button class="btn btn-lg btn-danger" type="button">Danger</button>
                        <button class="btn btn-lg btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-lg btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn</dt>
                    <dd>
                        <button class="btn btn-default" type="button">Default</button>
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-sm</dt>
                    <dd>
                        <button class="btn btn-sm btn-default" type="button">Default</button>
                        <button class="btn btn-sm btn-primary" type="button">Primary</button>
                        <button class="btn btn-sm btn-success" type="button">Success</button>
                        <button class="btn btn-sm btn-info" type="button">Info</button>
                        <button class="btn btn-sm btn-warning" type="button">Warning</button>
                        <button class="btn btn-sm btn-danger" type="button">Danger</button>
                        <button class="btn btn-sm btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-sm btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-xs</dt>
                    <dd>
                        <button class="btn btn-xs btn-default" type="button">Default</button>
                        <button class="btn btn-xs btn-primary" type="button">Primary</button>
                        <button class="btn btn-xs btn-success" type="button">Success</button>
                        <button class="btn btn-xs btn-info" type="button">Info</button>
                        <button class="btn btn-xs btn-warning" type="button">Warning</button>
                        <button class="btn btn-xs btn-danger" type="button">Danger</button>
                        <button class="btn btn-xs btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-xs btn-link" type="button">Link</button>
                    </dd>
                    <dt>Disabled</dt>
                    <dd>
                        <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-primary" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-success" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-info" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-warning" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-danger" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-inverse" disabled="disabled">Inverse</button>
                        <button type="button" class="btn btn-link" disabled="disabled">Button</button>
                    </dd>
                </dl>
            </div><!-- /.content-inner -->
        </section><!-- /#default -->
        <section id="fancy" class="col-sm-12">
            <div class="content-inner">

                <div class="page-header">
                    <h2 class="page-title">
                        Fancy
                        <small>Fancy buttons with gradient</small>
                    </h2>
                    <a href="#top" class="to-top pull-right"><i class="fa fa-chevron-up"></i> <span>Top</span></a>
                </div><!-- /.page-header -->
                <dl>
                    <dt>.btn-lg</dt>
                    <dd>
                        <button class="btn btn-lg btn-default" type="button">Default</button>
                        <button class="btn btn-lg btn-primary" type="button">Primary</button>
                        <button class="btn btn-lg btn-success" type="button">Success</button>
                        <button class="btn btn-lg btn-info" type="button">Info</button>
                        <button class="btn btn-lg btn-warning" type="button">Warning</button>
                        <button class="btn btn-lg btn-danger" type="button">Danger</button>
                        <button class="btn btn-lg btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-lg btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn</dt>
                    <dd>
                        <button class="btn btn-default" type="button">Default</button>
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-sm</dt>
                    <dd>
                        <button class="btn btn-sm btn-default" type="button">Default</button>
                        <button class="btn btn-sm btn-primary" type="button">Primary</button>
                        <button class="btn btn-sm btn-success" type="button">Success</button>
                        <button class="btn btn-sm btn-info" type="button">Info</button>
                        <button class="btn btn-sm btn-warning" type="button">Warning</button>
                        <button class="btn btn-sm btn-danger" type="button">Danger</button>
                        <button class="btn btn-sm btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-sm btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-xs</dt>
                    <dd>
                        <button class="btn btn-xs btn-default" type="button">Default</button>
                        <button class="btn btn-xs btn-primary" type="button">Primary</button>
                        <button class="btn btn-xs btn-success" type="button">Success</button>
                        <button class="btn btn-xs btn-info" type="button">Info</button>
                        <button class="btn btn-xs btn-warning" type="button">Warning</button>
                        <button class="btn btn-xs btn-danger" type="button">Danger</button>
                        <button class="btn btn-xs btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-xs btn-link" type="button">Link</button>
                    </dd>
                    <dt>Disabled</dt>
                    <dd>
                        <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-primary" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-success" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-info" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-warning" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-danger" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-inverse" disabled="disabled">Inverse</button>
                        <button type="button" class="btn btn-link" disabled="disabled">Button</button>
                    </dd>
                </dl>
            </div><!-- /.content-inner -->
        </section><!-- /#fancy -->
        <section id="edge" class="col-sm-12">
            <div class="content-inner">
                <div class="page-header">
                    <h2 class="page-title">
                        Edge
                        <small>Bold &amp; strong</small>
                    </h2>
                    <a href="#top" class="to-top pull-right"><i class="fa fa-chevron-up"></i> <span>Top</span></a>
                </div><!-- /.page-header -->
                <dl>
                    <dt>.btn-lg</dt>
                    <dd>
                        <button class="btn btn-lg btn-default" type="button">Default</button>
                        <button class="btn btn-lg btn-primary" type="button">Primary</button>
                        <button class="btn btn-lg btn-success" type="button">Success</button>
                        <button class="btn btn-lg btn-info" type="button">Info</button>
                        <button class="btn btn-lg btn-warning" type="button">Warning</button>
                        <button class="btn btn-lg btn-danger" type="button">Danger</button>
                        <button class="btn btn-lg btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-lg btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn</dt>
                    <dd>
                        <button class="btn btn-default" type="button">Default</button>
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-sm</dt>
                    <dd>
                        <button class="btn btn-sm btn-default" type="button">Default</button>
                        <button class="btn btn-sm btn-primary" type="button">Primary</button>
                        <button class="btn btn-sm btn-success" type="button">Success</button>
                        <button class="btn btn-sm btn-info" type="button">Info</button>
                        <button class="btn btn-sm btn-warning" type="button">Warning</button>
                        <button class="btn btn-sm btn-danger" type="button">Danger</button>
                        <button class="btn btn-sm btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-sm btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-xs</dt>
                    <dd>
                        <button class="btn btn-xs btn-default" type="button">Default</button>
                        <button class="btn btn-xs btn-primary" type="button">Primary</button>
                        <button class="btn btn-xs btn-success" type="button">Success</button>
                        <button class="btn btn-xs btn-info" type="button">Info</button>
                        <button class="btn btn-xs btn-warning" type="button">Warning</button>
                        <button class="btn btn-xs btn-danger" type="button">Danger</button>
                        <button class="btn btn-xs btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-xs btn-link" type="button">Link</button>
                    </dd>
                    <dt>Disabled</dt>
                    <dd>
                        <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-primary" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-success" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-info" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-warning" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-danger" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-inverse" disabled="disabled">Inverse</button>
                        <button type="button" class="btn btn-link" disabled="disabled">Button</button>
                    </dd>
                </dl>
            </div><!-- /.content-inner -->
        </section><!-- /#Edge -->
        <section id="round" class="col-sm-12">
            <div class="content-inner">

                <div class="page-header">
                    <h2 class="page-title">
                        Round
                        <small>Round buttons</small>
                    </h2>
                    <a href="#top" class="to-top pull-right"><i class="fa fa-chevron-up"></i> <span>Top</span></a>
                </div><!-- /.page-header -->
                <dl>
                    <dt>.btn-lg</dt>
                    <dd>
                        <button class="btn btn-lg btn-default" type="button">Default</button>
                        <button class="btn btn-lg btn-primary" type="button">Primary</button>
                        <button class="btn btn-lg btn-success" type="button">Success</button>
                        <button class="btn btn-lg btn-info" type="button">Info</button>
                        <button class="btn btn-lg btn-warning" type="button">Warning</button>
                        <button class="btn btn-lg btn-danger" type="button">Danger</button>
                        <button class="btn btn-lg btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-lg btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn</dt>
                    <dd>
                        <button class="btn btn-default" type="button">Default</button>
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-sm</dt>
                    <dd>
                        <button class="btn btn-sm btn-default" type="button">Default</button>
                        <button class="btn btn-sm btn-primary" type="button">Primary</button>
                        <button class="btn btn-sm btn-success" type="button">Success</button>
                        <button class="btn btn-sm btn-info" type="button">Info</button>
                        <button class="btn btn-sm btn-warning" type="button">Warning</button>
                        <button class="btn btn-sm btn-danger" type="button">Danger</button>
                        <button class="btn btn-sm btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-sm btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-xs</dt>
                    <dd>
                        <button class="btn btn-xs btn-default" type="button">Default</button>
                        <button class="btn btn-xs btn-primary" type="button">Primary</button>
                        <button class="btn btn-xs btn-success" type="button">Success</button>
                        <button class="btn btn-xs btn-info" type="button">Info</button>
                        <button class="btn btn-xs btn-warning" type="button">Warning</button>
                        <button class="btn btn-xs btn-danger" type="button">Danger</button>
                        <button class="btn btn-xs btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-xs btn-link" type="button">Link</button>
                    </dd>
                    <hr>
                    <dt>Disabled</dt>
                    <dd>
                        <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-primary" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-success" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-info" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-warning" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-danger" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-inverse" disabled="disabled">Inverse</button>
                        <button type="button" class="btn btn-link" disabled="disabled">Button</button>
                    </dd>
                </dl>
            </div><!-- /.content-inner -->
        </section><!-- /#round-->
        <section id="ghost" class="col-sm-12">
            <div class="content-inner">
                <div class="page-header">
                    <h2 class="page-title">
                        Ghost
                        <small>Outlined</small>
                    </h2>
                    <a href="#top" class="to-top pull-right"><i class="fa fa-chevron-up"></i> <span>Top</span></a>
                </div><!-- /.page-header -->
                <dl>
                    <dt>.btn-lg</dt>
                    <dd>
                        <button class="btn btn-lg btn-default" type="button">Default</button>
                        <button class="btn btn-lg btn-primary" type="button">Primary</button>
                        <button class="btn btn-lg btn-success" type="button">Success</button>
                        <button class="btn btn-lg btn-info" type="button">Info</button>
                        <button class="btn btn-lg btn-warning" type="button">Warning</button>
                        <button class="btn btn-lg btn-danger" type="button">Danger</button>
                        <button class="btn btn-lg btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-lg btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn</dt>
                    <dd>
                        <button class="btn btn-default" type="button">Default</button>
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-sm</dt>
                    <dd>
                        <button class="btn btn-sm btn-default" type="button">Default</button>
                        <button class="btn btn-sm btn-primary" type="button">Primary</button>
                        <button class="btn btn-sm btn-success" type="button">Success</button>
                        <button class="btn btn-sm btn-info" type="button">Info</button>
                        <button class="btn btn-sm btn-warning" type="button">Warning</button>
                        <button class="btn btn-sm btn-danger" type="button">Danger</button>
                        <button class="btn btn-sm btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-sm btn-link" type="button">Link</button>
                    </dd>
                    <dt>.btn-xs</dt>
                    <dd>
                        <button class="btn btn-xs btn-default" type="button">Default</button>
                        <button class="btn btn-xs btn-primary" type="button">Primary</button>
                        <button class="btn btn-xs btn-success" type="button">Success</button>
                        <button class="btn btn-xs btn-info" type="button">Info</button>
                        <button class="btn btn-xs btn-warning" type="button">Warning</button>
                        <button class="btn btn-xs btn-danger" type="button">Danger</button>
                        <button class="btn btn-xs btn-inverse" type="button">Inverse</button>
                        <button class="btn btn-xs btn-link" type="button">Link</button>
                    </dd>
                    <dt>Disabled</dt>
                    <dd>
                        <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-primary" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-success" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-info" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-warning" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-danger" disabled="disabled">Button</button>
                        <button type="button" class="btn btn-inverse" disabled="disabled">Inverse</button>
                        <button type="button" class="btn btn-link" disabled="disabled">Button</button>
                    </dd>
                </dl>
            </div><!-- /.content-inner -->
        </section><!-- /#ghost -->
    </div><!-- /Content -->
</div><!-- /Wrapper -->
<div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    $('.nav a').smoothScroll({ offset: -73 });
    $('.back-top a').smoothScroll({ offset: -100 });
    $('.content-inner .to-top').smoothScroll({ offset: 0 });
});
</script>

</body>
</html>
Preview
Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
TOP CODES
Toggle Switch Button for Changing Language with Bootstrap
Draggable Cards with Bootstrap Grids
Bootstrap Table with Add New Row Button
WHAT IS NEW IN KERIXA?
Glassy Chat Box Code with Reaction Emojis
Dark Neo Brutal Resume Template
Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability
Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability
Flat Photo Frame Template
Cute Photo Frame Template
16 React JS Accordions
17 React JS Buttons
RECENT CODES
Bootstrap Timeline with Colorful Lines and Icons
Simple Dark Vertical Timeline with Bootstrap
Colorful Icons for Bootstrap Timeline Joints
Bootstrap Vertical Timeline with Image Cards and Descriptions
Vertical Bootstrap Timeline in Half Page
Drop Down Menu by React JS
Animating React Popup with Float in and Zoom Effects
Popup vs. Alert Code using React JS
React Glassy Gradient Popup Modal
Animating Toggle Popup Menu with React JS
CATEGORIES
Bootstrap Accordions Bootstrap Buttons
Bootstrap Cards Bootstrap Footers
Bootstrap Forms Bootstrap Grids
Bootstrap Headers Bootstrap Paginations
Bootstrap Popups Bootstrap Progress Bars
Bootstrap Search Boxes Bootstrap Sidebars
Bootstrap Sliders Bootstrap Tables
Bootstrap Tabs Bootstrap Thumbnails
Bootstrap Timeline Bootstrap Toggle Switches
React Accordions React Buttons
React Forms React Headers
React Menus React Popups
React Progress Bars React Sidebars
Frontend Free Code
© 2024 Kerixa Inc