12+ Bootstrap Button Examples

This post contains a total of 12+ Hand-Picked Bootstrap Button Examples with Source Code. All the Buttons are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Robson Nascimento

Made by Robson Nascimento. 3d Bootstrap button with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style>
body {
  text-align: center;
  padding: 200px;
}

.button {
  display: inline-block;
  background: #4285f4;
  color: #fff;
  text-transform: uppercase;
  padding: 20px 30px;
  border-radius: 5px;
  box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
}
.button:hover {
  box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate(0px, -10px) scale(1.2);
          transform: translate(0px, -10px) scale(1.2);
}
</style>
</head>
<body>
<div class="button">This is a button</div>
</body>
</html>

2. By jmalatia

Made by jmalatia. Bootstrap buttons with loading animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'>

</head>
<body>
  <div style="margin:3em;">
<button type="button" class="btn btn-primary btn-lg " id="load1" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>
<br>
  <br>
<button type="button" class="btn btn-primary btn-lg" id="load2" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js'></script>
      <script id="rendered-js" >
$('.btn').on('click', function () {
  var $this = $(this);
  $this.button('loading');
  setTimeout(function () {
    $this.button('reset');
  }, 8000);
});
    </script>
</body>
</html>

3. By Melanie MΓΌller

Made by Melanie MΓΌller. Neumorphism Bootstrap Button with gradient. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  
<style>
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #2D3142;
}

.container {
  width: 550px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.primary-neumorph,
.primary-neumorph:hover,
.primary-neumorph:visited {
  padding: 50px;
  border-radius: 10px;
  border-color: #424860;
  color: white;
  background: linear-gradient(145deg, #424860, #181a24);
  box-shadow: 5px 5px 5px #232633, -5px -5px 5px #373c51;
}
</style>
</head>
<body>
  <div class="container primary">
  <button type="button" class="primary-neumorph">Primary button</button>
  </div>
</body>
</html>

4. By dannydao

Made by dannydao. Bootstrap arrow buttons with click effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
  
<style>
body {
   /* just for this demo. */
   
   padding: 30px;
}

.btn {
   /* just for this demo. */
   
   margin-top: 5px;
}

.btn-arrow-right,
.btn-arrow-left {
   position: relative;
   padding-left: 18px;
   padding-right: 18px;
}

.btn-arrow-right {
   padding-left: 36px;
}

.btn-arrow-left {
   padding-right: 36px;
}

.btn-arrow-right:before,
.btn-arrow-right:after,
.btn-arrow-left:before,
.btn-arrow-left:after {
   /* make two squares (before and after), looking similar to the button */
   
   content: "";
   position: absolute;
   top: 5px;
   /* move it down because of rounded corners */
   
   width: 22px;
   /* same as height */
   
   height: 22px;
   /* button_outer_height / sqrt(2) */
   
   background: inherit;
   /* use parent background */
   
   border: inherit;
   /* use parent border */
   
   border-left-color: transparent;
   /* hide left border */
   
   border-bottom-color: transparent;
   /* hide bottom border */
   
   border-radius: 0px 4px 0px 0px;
   /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
   
   -webkit-border-radius: 0px 4px 0px 0px;
   -moz-border-radius: 0px 4px 0px 0px;
}

.btn-arrow-right:before,
.btn-arrow-right:after {
   transform: rotate(45deg);
   /* rotate right arrow squares 45 deg to point right */
   
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
}

.btn-arrow-left:before,
.btn-arrow-left:after {
   transform: rotate(225deg);
   /* rotate left arrow squares 225 deg to point left */
   
   -webkit-transform: rotate(225deg);
   -moz-transform: rotate(225deg);
   -o-transform: rotate(225deg);
   -ms-transform: rotate(225deg);
}

.btn-arrow-right:before,
.btn-arrow-left:before {
   /* align the "before" square to the left */
   
   left: -11px;
}

.btn-arrow-right:after,
.btn-arrow-left:after {
   /* align the "after" square to the right */
   
   right: -11px;
}

.btn-arrow-right:after,
.btn-arrow-left:before {
   /* bring arrow pointers to front */
   
   z-index: 1;
}

.btn-arrow-right:before,
.btn-arrow-left:after {
   /* hide arrow tails background */
   
   background-color: white;
}
</style>
</head>
<body>
  <button type="button" class="btn btn-default btn-arrow-left">Default</button>
<button type="button" class="btn btn-primary btn-arrow-left">Primary</button>
<button type="button" class="btn btn-success btn-arrow-left">Success</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-info btn-arrow-right">Info</button>
<button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
<button type="button" class="btn btn-danger btn-arrow-right">Danger</button>
</body>
</html>

5. By Eric Ros

Made by Eric Ros. Bootstrap button with loading effect on click. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  
<style>
@keyframes bullet {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
body {
  background: #2d2d2d;
}

.button-wrapper {
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  left: 20vw;
  top: 10vh;
  width: 89px;
  padding: 2px;
  border-radius: 6px;
}
.button-wrapper button {
  position: relative;
  top: 0;
  left: 0;
  border: 2px solid transparent !important;
  outline: none !important;
}
.button-wrapper button.clicked .bullet {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 4px;
  z-index: -1 !important;
  transform-origin: 0% 50%;
}
.button-wrapper button.clicked .bullet.white {
  animation: bullet 2s linear infinite forwards;
  background: white;
  box-shadow: 0 0 4px white;
}
.button-wrapper button.clicked .bullet.red {
  animation: bullet 2s infinite forwards;
  background: red;
  box-shadow: 0 0 4px red;
}
.button-wrapper button.clicked .bullet.aqua {
  animation: bullet 2s linear infinite forwards;
  background: aquamarine;
  box-shadow: 0 0 4px 8px aquamarine;
}
.button-wrapper button.clicked .bullet.green {
  animation: bullet 2s linear infinite forwards;
  background: lightgreen;
  box-shadow: 0 0 0px 0px lightgreen;
}
.button-wrapper button.clicked .bullet.multiple {
  background: white;
  box-shadow: 0 0 0px 0px white;
  animation: bullet 2s linear infinite forwards;
}
.button-wrapper button.clicked .bullet2.multiple {
  background: red;
  box-shadow: 0 0 0px 0px white;
  animation: bullet 3s infinite forwards;
}
.button-wrapper button.clicked .bullet3.multiple {
  background: aquamarine;
  box-shadow: 0 0 0px 0px white;
  animation: bullet 5s ease-in infinite forwards;
}
.button-wrapper button.clicked .bullet4.multiple {
  background: lightgreen;
  box-shadow: 0 0 0px 0px white;
  animation: bullet 6s ease-out infinite forwards;
}
</style>
</head>
<body>
  bullet3<div class="button-wrapper">
  <button id="myButton" class="btn btn-default">
    Click me!
    <div class="bullet white"></div>
  </button>
</div>

<div class="button-wrapper">
  <button id="myButton2" class="btn btn-danger">
    Click me!
    <div class="bullet red"></div>
  </button>
</div>

<div class="button-wrapper">
  <button id="myButton3" class="btn btn-default">
    Click me!
    <div class="bullet aqua"></div>
  </button>
</div>

<div class="button-wrapper">
  <button id="myButton4" class="btn btn-success">
    Click me!
    <div class="bullet green"></div>
  </button>
</div>

<div class="button-wrapper">
  <button id="myButton5" class="btn btn-success">
    Click me!
    <div class="bullet multiple"></div>
    <div class="bullet bullet2 multiple"></div>
    <div class="bullet bullet3 multiple"></div>
  </button>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script id="rendered-js" >
$("#myButton").click(function (e) {
  $(this).addClass("clicked");
});

$("#myButton2").click(function (e) {
  $(this).addClass("clicked");
});

$("#myButton3").click(function (e) {
  $(this).addClass("clicked");
});

$("#myButton4").click(function (e) {
  $(this).addClass("clicked");
});

$("#myButton5").click(function (e) {
  $(this).addClass("clicked");
});
    </script>
</body>
</html>

6. By Jason Lampel

Made by Jason Lampel. Button with check effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
body {
  padding-top: 50px;
}

.row {
  align-items: center;
  justify-content: center;
}

.btn {
  cursor: pointer;
}

.btn-primary:not(.active) > .fa-check-circle {
  display: none;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked>        
        <i class="fa fa-check-circle" aria-hidden="true"></i>
        # of Fires
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"> 
        <i class="fa fa-check-circle" aria-hidden="true"></i>
        Total Acres
      </label>
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

</body>
</html>
 

7. By Syed Hashir Ali Shah

Made by Syed Hashir Ali Shah. Custom Bootstrap Button Group. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
body,
html {
  height: 100%;
}
.main {
  width: 100%;
  height: 100%;
  position: relative;
  color: #111e6c;
  /* Try using a background image
  background: url('images/frontPageBackground.jpg');*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 1s ease;
  padding-top: 70px;
}
.main:before {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  /*background: #111e6c;*/
  opacity: 0.2;
  filter: alpha(opacity=90);
}
.main-text {
  top: 20%;
  left: auto;
  right: auto;
  position: relative;
  color: #111e6c;
}
.btn-circle,
#to-top {
  border-radius: 50%;
  background: #111e6c;
  padding: 6px;
  font-size: 14px;
  /* border-radius: 50%; */
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
}
.c2a-btn {
  margin: 48px auto 0;
  margin: 4.8rem auto 0;
}
.btn-default {
  color: #fff;
  background-color: #111e6c;
  border-color: #111e6c;
  transition: all 1s ease;
}
.btn-group-lg > .btn,
.btn-lg {
  padding: 18px 28px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 50px;
}
.btn-group .btn-or {
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
  box-shadow: 0;
  border: 2px solid #fff;
}
</style>
</head>
<body>
  <div class="container-fluid main">
  <div class="text-center main-text">
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>

    <div class="c2a-btn footer-c2a-btn">
      <div class="btn-group btn-group-lg" role="group" aria-label="Call to action">
        <a type="button" class="btn btn-default btn-lg" href="#">Click Me</a>
        <span class="btn-circle btn-or">or</span>
        <a type="button" class="btn btn-default btn-lg" href="#">Click Me</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

8. By Pavlos

Made by Pavlos. Bootstrap radio and checkbox buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  
</head>
<body>
  <div class="container">
    <h2>Checkbox</h2>
    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
      <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
      <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

      <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
      <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

      <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
      <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
    <br><br>
    <h2>Radio Buttons</h2>
    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
      <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
      <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

      <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
      <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

      <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
      <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
    </div>
  </div>
</body>
</html>

9. By evenwu

Made by evenwu. Simplistic bootstrap buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
  
<style>
html, body { height: 100%;}

body {
  display: flex;
  justify-content: center;
  align-items:center;
}

.all .btn {
  display: inline-block;
  margin: .1em;
  min-width: 10em;
}

h1 {
  font-size: 20px;
  font-weight: 300;
  margin: 1em 0;
  text-align: center;
}
</style>
</head>
<body>
  <div class="all">
  <button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-dark">Dark</button>
  <br>
  <button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-warning">Warning</button>
  <br>
  <button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>
  <h1>Heading</h1>
</div>
</body>
</html>

10. By Aashima Jain

Made by Aashima Jain. Bootstrap Buttons with hover effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
body{
            margin-top: 100px !important;
        }
        .btn{
            background-color:#fff;
            color: #1CD1E2;
            border:2px solid #1CD1E2 !important;
            border-radius: 0px !important;
            font-size: 17px;
            font-weight: 700;
            position: relative;
            letter-spacing: 1px;
            text-transform: uppercase;
            z-index: 1;
            transition: all 0.6s ease 0s;
            overflow: hidden;
        }
        .btn:hover{
            color: #fff !important;
        }
        .btn:before{
            background: #1CD1E2;
            content: "";
            height: 1000px;
            left: 50%;
            opacity: 1;
            position: absolute;
            top: 50%;
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
            transition: all 0.2s linear 0s;
            width: 0;
            z-index: -1;
        }
        .btn:hover:before{
            opacity: 1;
            width: 100%;
        }
</style>
</head>  
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <a href="#" class="btn btn-lg"><span>button</span></a>
            </div>
            <div class="col-sm-3">
                <a href="#" class="btn btn-lg"><span>button</span></a>
            </div>
            <div class="col-sm-3">
                <a href="#" class="btn btn-lg"><span>button</span></a>
            </div>
            <div class="col-sm-3">
                <a href="#" class="btn btn-lg"><span>button</span></a>
            </div>
        </div>
    </div>
</body>
</html>

11. By Desain 360

Made by Desain 360. Simple buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>
/**************************
  DEFAULT BOOTSTRAP STYLES
**************************/

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 10px 16px;
}
  
.btn-lg {
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

.btn-primary {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}

/***********************
  SHARP BUTTONS
************************/
.sharp {
  border-radius:0;
}

/***********************
  CUSTOM GRADIENT
************************/
.gradient1 {
background: #d53369; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #d53369 , #cbad6d); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #d53369 , #cbad6d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/***********************
  GRADIENT BUTTONS
************************/
.btn-primary.gradient {
    background: -moz-linear-gradient(top,  #33a6cc 50%, #0099cc 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* IE10+ */
    background: linear-gradient(to bottom,  #33a6cc 50%,#0099cc 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */
}
.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary {
    background: -moz-linear-gradient(top,  #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* IE10+ */
    background: linear-gradient(to bottom,  #66b2cc 50%,#33a6cc 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */
}
.btn-primary.gradient:active, .btn-primary.gradient.active {
    background: -moz-linear-gradient(top,  #267c99 50%, #007299 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #267c99 50%,#007299 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #267c99 50%,#007299 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #267c99 50%,#007299 50%); /* IE10+ */
    background: linear-gradient(to bottom,  #267c99 50%,#007299 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); /* IE6-9 */
}

/***********************
  OUTLINE BUTTONS
************************/

.btn.outline {
    background: none;
    padding: 12px 22px;
}
.btn-primary.outline {
    border: 2px solid #0099cc;
    color: #0099cc;
}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
    color: #33a6cc;
    border-color: #33a6cc;
}
.btn-primary.outline:active, .btn-primary.outline.active {
    border-color: #007299;
    color: #007299;
    box-shadow: none;
}

.btn-success.outline {
    border: 2px solid #449d44;
    color: #449d44;
}
.btn-success.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
    color: #449d44;
    border-color: #449d44;
}
.btn-success.outline:active, .btn-primary.outline.active {
    border-color: #449d44;
    color: #449d44
    box-shadow: none;
}

/***********************
  ROUND BUTTONS
************************/
.round {
  border-radius: 24px;
}

/***********************
  RAISED BUTTONS
************************/
.btn-primary.raised {
    box-shadow: 0 3px 0 0 #007299;
}
.btn-primary.raised:active, .btn-primary.raised.active {
    background: #33a6cc;
    box-shadow: none;
    margin-bottom: -3px;
    margin-top: 3px;
}

.btn-success.raised {
    box-shadow: 0 3px 0 0 #007299;
}
.btn-success.raised:active, .btn-primary.raised.active {
    background: #33a6cc;
    box-shadow: none;
    margin-bottom: -3px;
    margin-top: 3px;
}

/***********************
  CUSTOM BTN VALUES
************************/

.btn {
    padding: 14px 24px;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
}
</style>
</head>
<body>
  <br></br>
<div class="container text-center">
  
  <div class="row">
<button type="button" class="btn btn-primary btn-lg sharp">Button</button>

<button type="button" class="btn btn-primary btn-lg outline">Button</button>

<button type="button" class="btn btn-primary btn-lg gradient gradient1">Button</button>

<button type="button" class="btn btn-primary btn-lg round">Button</button>

<button type="button" class="btn btn-primary btn-lg raised">Button</button> 
</div>
  
  <br>
  
    <div class="row">
<button type="button" class="btn btn-success btn-lg sharp">Button</button>

<button type="button" class="btn btn-success btn-lg outline">Button</button>

<button type="button" class="btn btn-success btn-lg gradient">Button</button>

<button type="button" class="btn btn-success btn-lg round">Button</button>

<button type="button" class="btn btn-success btn-lg raised">Button</button> 
</div>
  
</div>
</body>
</html>

12. By Verawat

Made by Verawat. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  
<style>
.btn {
  -moz-transition: all, ease-in-out 0.5s;
  -o-transition: all, ease-in-out 0.5s;
  -webkit-transition: all, ease-in-out 0.5s;
  transition: all, ease-in-out 0.5s;
}

.btn, .btn:focus {
  color: gray;
}

.btn:hover, .btn-primary, .btn-primary:hover, .btn-info, .btn-info:hover, .btn-success, .btn-success:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-inverse, .btn-inverse:hover, .btn-primaryColor, .btn-primaryColor:hover, .btn-secondaryColor, .btn-secondaryColor:hover, .btn-tertiaryColor, .btn-tertiaryColor:hover {
  color: #fff;
}

.btn {
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 45px;
  margin: 0;
  border: none;
  background: #fff;
  position: relative;
  display: inline-block;
}
.btn:hover {
  background: #0a8cfd;
  text-decoration: none;
}
.btn:focus {
  outline: none;
}

.btn-primary {
  background: #005888;
}
.btn-primary:hover {
  background: #0079bb;
}

.btn-info {
  background: #49AFCD;
}
.btn-info:hover {
  background: #71c1d8;
}

.btn-success {
  background: #5BB75B;
}
.btn-success:hover {
  background: #7ec77e;
}

.btn-warning {
  background: #FAA732;
}
.btn-warning:hover {
  background: #fbbc64;
}

.btn-danger {
  background: #DA4F49;
}
.btn-danger:hover {
  background: #e37873;
}

.btn-inverse {
  background: #363636;
}
.btn-inverse:hover {
  background: #505050;
}

.btn-primaryColor {
  background: #0156A0;
}
.btn-primaryColor:hover {
  background: #0171d3;
}

.btn-secondaryColor {
  background: #02A7AB;
}
.btn-secondaryColor:hover {
  background: #03d8dd;
}

.btn-tertiaryColor {
  background: #666666;
}
.btn-tertiaryColor:hover {
  background: gray;
}

.btn-large {
  font-size: 18px;
  padding: 12px 22px 10px;
}

.btn-small {
  font-size: 11px;
  padding: 8px 16px 6px;
}

.btn-mini {
  font-size: 9px;
  padding: 7px 12px 5px;
}

.btn-link {
  background: none;
  padding: 0;
  border-radius: 0;
  border: none;
}

body {
  background: url("http://thecssguru.freeiz.com/animate/bg.png");
}

.wrapper {
  width: 525px;
  margin: 50px auto;
  padding: 25px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}
.wrapper h1 {
  font: bold 28px Helvetica;
  margin: 0 10px 10px;
}
.wrapper a {
  margin: 10px;
  display: block;
  float: left;
}
</style>
</head>
<body>
  <div class="wrapper">
  <h1>Auto Custom Bootstrap Buttons</h1>
  <a href="" class="btn">Read More</a>
  <a href="" class="btn btn-primary">Read More</a>
  <a href="" class="btn btn-info">Read More</a>
  <a href="" class="btn btn-success">Read More</a>
  <a href="" class="btn btn-warning">Read More</a>
  <a href="" class="btn btn-danger">Read More</a>
  <a href="" class="btn btn-inverse">Read More</a>
  <a href="" class="btn btn-large">Read More</a>
  <a href="" class="btn btn-small">Read More</a>
  <a href="" class="btn btn-mini">Read More</a>
</div>

<div class="text-center" style="color: #fff;">ΰΈ‚ΰΈ­ΰΈšΰΈ„ΰΈΈΰΈ“  Credit : https://codepen.io/thecssguru/pen/kcKml<br><br><br></div>
  
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>
 

13. By Josh Wentz

Made by Josh Wentz. Bootstrap button with dropdown. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <head>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<br>
<body>
<div class="btn-group pull-right" role="group" aria-label="...">
  <button type="button" class="btn btn-success">&nbsp;+&nbsp; Add building</button>
  <div class="btn-group pull-right" role="group">
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Upload multiple buildings</a></li>
    </ul>
  </div>
</div>
</body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>