Twitter's Bootstrap 3 Button Generator

Generate buttons for Twitter's Bootstrap 3 on the fly. Enter your html color code (hexadecimal) and get two variations of buttons (default and with gradients (2.x style)). Read more.

Note: To generate buttons for Twitter's Bootstrap 2.x use this generator.

Your button (custom):

Add the following CSS below bootstrap(.min).css and apply the class btn-custom to any button (or other element) on your site that you want to have these colors.

(active)

(disabled)

Your CSS code:

Copied text to clipboard

Your button (oldstyle):

Add the following CSS below bootstrap(.min).css and apply the class btn-oldstyle to any button (or other element) on your site that you want to have these colors.

(active)

(disabled)

Your CSS code:

.btn-oldstyle {
  background-color: #08c;
  border-color: #08c;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #007ab8;
  background-image: -moz-linear-gradient(top,#08c,#006699);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#006699));
  background-image: -webkit-linear-gradient(top,#08c,#006699);
  background-image: -o-linear-gradient(top,#08c,#006699);
  background-image: linear-gradient(to bottom,#08c,#006699);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff006599', GradientType=0);
  border-color: #006699 #006699 #00334d;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}
.btn-oldstyle:hover,
.btn-oldstyle:focus {
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position .1s linear;
  -moz-transition: background-position .1s linear;
  -o-transition: background-position .1s linear;
  transition: background-position .1s linear;
}
.btn-oldstyle:hover,
.btn-oldstyle:focus {
  background-color: #006699;
}
.btn-oldstyle:active,
.btn-oldstyle.active,
.btn-oldstyle.active:hover {
  background-color: #0077b3;
  border-color: #006699;
}
.btn-oldstyle.disabled:hover,
.btn-oldstyle.disabled:focus,
.btn-oldstyle.disabled:active,
.btn-oldstyle.disabled.active,
.btn-oldstyle[disabled] .btn-oldstyle:hover,
.btn-oldstyle[disabled] .btn-oldstyle:focus,
.btn-oldstyle[disabled] .btn-oldstyle:active,
.btn-oldstyle[disabled] .btn-oldstyle.active {
  background-color: #08c;
  border-color: #08c;
}

Copied text to clipboard

references/tools:

Contact:

Send improvements and suggestions to @bassjobsen