buttons.css

.btn {
  /* Postioning & Display*/
  display: inline-block;
  padding: .5em 4em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 2px;

  /*Other */
  background-color: #f3f3f3;
  color: #333;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
}

.btn:not(.active):hover {
  background-color: #f5f5f5;
}

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  background-color: #eee;
  color: #333;
}
.btn:active,
.btn.active {
  background-color: #d8d8d8;
}

.btn:first-child {
  *margin-left: 0;
}

.btn:hover {
  background-color: #e6e6e6;
  color: #333333;
  text-decoration: none;
}

.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.btn.active,
.btn:active {
  background-color: #e6e6e6;
  background-image: none;
  outline: 0;
}

.btn.disabled,
.btn[disabled] {
  background-color: #e6e6e6;
  background-image: none;
  cursor: default;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.btn-mini {
  padding: .5em 4em;
  font-size: 10px;
  line-height: 16px;
}

.btn-large {
  padding: .5em 4em;
  font-size: 25px;
  line-height: normal;
}

.btn-block {
  display: block;
  width: 100%;
  padding: .5em 4em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 25px;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

.btn-blue.active,
.btn-yellow.active,
.btn-red.active,
.btn-green.active,
.btn-orange.active,
.btn-black.active,
.btn-purple.active {
  color: rgba(255, 255, 255, 0.75);
}

.btn-blue:focus,
.btn-yellow:focus,
.btn-red:focus,
.btn-green:focus,
.btn-orange:focus,
.btn-black:focus,
.btn-purple:focus {
  outline: none;
}

/* =================
 Blue Button
===================*/

.btn-blue {
  background-color: #268BD2;
  color: #ffffff;
  -webkit-transition: background 300ms ease;
  -moz-transition: background 300ms ease;
  transition: background 300ms ease;
}

.btn-blue:not(.active):hover {
  background-color: #9099A3;
}

.btn-blue:hover,
.btn-blue:active,
.btn-blue.active,
.btn-blue.disabled,
.btn-blue[disabled] {
  background-color: #9099A3;
  color: #ffffff;
}

/* =================
 Yellow Button
===================*/

.btn-yellow {
  background-color: #FFCC00;
  color: #fff;
  -webkit-transition: background 300ms ease;
  -moz-transition: background 300ms ease;
  transition: background 300ms ease;
}
.btn-yellow:not(.active):hover {
  background-color: #f5ae46;
}
.btn-yellow:hover,
.btn-yellow:active,
.btn-yellow.active,
.btn-yellow.disabled,
.btn-yellow[disabled] {
  background-color: #f5a93a;
  color: #fff;
}

/* =================
 Red Button
===================*/

.btn-red {
  background-color: #F34541;
  color: #ffffff;
  -webkit-transition: background 300ms ease;
  -moz-transition: background 300ms ease;
  transition: background 300ms ease;
}
.btn-red:not(.active):hover {
  background-color: #3e4b5d;
}
.btn-red:hover,
.btn-red:active,
.btn-red.active,
.btn-red.disabled,
.btn-red[disabled] {
  background-color: #3e4b5d;
  color: #ffffff;
}

/* =================
 Green Button
===================*/

.btn-green {
  background-color: #38B87C;
  color: #ffffff;
  -webkit-transition: background 300ms ease;
  -moz-transition: background 300ms ease;
  transition: background 300ms ease;
}

.btn-green:not(.active):hover {
  background-color: #95D469;
}

.btn-green:hover,
.btn-green:active,
.btn-green.active,
.btn-green.disabled,
.btn-green[disabled] {
  background-color: #82b964;
  color: #ffffff;
}

/* =================
 Orange Button
===================*/

.btn-orange {
  background-color: #F0472B;
  color: #ffffff;
  -webkit-transition: background 300ms ease;
  -moz-transition: background 300ms ease;
  transition: background 300ms ease;
}
.btn-orange:not(.active):hover {
  background-color: #454545;
}
.btn-orange:hover,
.btn-orange:active,
.btn-orange.active,
.btn-orange.disabled,
.btn-orange[disabled] {
  background-color: #454545;
  color: #ffffff;
}

/* =================
 Black Button
===================*/

.btn-black {
  background-color: #4e5563;
  color:  white;
  -webkit-transition: background 300ms ease;
  -moz-transition: background 300ms ease;
  transition: background 300ms ease;
}

.btn-black:not(.active):hover {
  background-color: #111;
}

.btn-black:hover,
.btn-black:active,
.btn-black.active,
.btn-black.disabled,
.btn-black[disabled] {
  background-color: #4e5563;
  color: #ffffff;
}

/* =================
 Purple Button
===================*/

.btn-purple {
  background-color: #795aac;
  color:  #fff;
  -webkit-transition: background 300ms ease;
  -moz-transition: background 300ms ease;
  transition: background 300ms ease;
}

.btn-purple:not(.active):hover {
  background-color: #8661a3;
}

.btn-purple:hover,
.btn-purple:active,
.btn-purple.active,
.btn-purple.disabled,
.btn-purple[disabled] {
  background-color: #795aac;
  color: #ffffff;
}