Twitter Bootstrap Button Generator

Generate buttons for Twitter Bootstrap 2.x on the fly. Enter your html color code (hexadecimal) and get three variations of buttons (dark, light, spin).

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

Your button (lighten):

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

(active)

(disabled)

Your CSS code:

.btn-custom-lighten.active {
  color: rgba(255, 255, 255, 0.75);
}
.btn-custom-lighten {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #0096e0;
  background-image: -moz-linear-gradient(top, #0088cc, #00aaff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#00aaff));
  background-image: -webkit-linear-gradient(top, #0088cc, #00aaff);
  background-image: -o-linear-gradient(top, #0088cc, #00aaff);
  background-image: linear-gradient(to bottom, #0088cc, #00aaff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff00aaff', GradientType=0);
  border-color: #00aaff #00aaff #0077b3;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #00aaff;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-custom-lighten:hover,
.btn-custom-lighten:focus,
.btn-custom-lighten:active,
.btn-custom-lighten.active,
.btn-custom-lighten.disabled,
.btn-custom-lighten[disabled] {
  color: #ffffff;
  background-color: #00aaff;
  *background-color: #0099e6;
}
.btn-custom-lighten:active,
.btn-custom-lighten.active {
  background-color: #0088cc ;
}

Copied text to clipboard

Your button (darken):

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

(active)

(disabled)

Your CSS code:

.btn-custom-darken.active {
  color: rgba(255, 255, 255, 0.75);
}
.btn-custom-darken {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #007ab8;
  background-image: -moz-linear-gradient(top, #0088cc, #006699);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#006699));
  background-image: -webkit-linear-gradient(top, #0088cc, #006699);
  background-image: -o-linear-gradient(top, #0088cc, #006699);
  background-image: linear-gradient(to bottom, #0088cc, #006699);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff006699', 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);
  *background-color: #006699;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-custom-darken:hover,
.btn-custom-darken:focus,
.btn-custom-darken:active,
.btn-custom-darken.active,
.btn-custom-darken.disabled,
.btn-custom-darken[disabled] {
  color: #ffffff;
  background-color: #006699;
  *background-color: #005580;
}
.btn-custom-darken:active,
.btn-custom-darken.active {
  background-color: #004466 ;
}

Copied text to clipboard

Your button (spin):

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

(active)

(disabled)

Your CSS code:

.btn-custom-spin.active {
  color: rgba(255, 255, 255, 0.75);
}
.btn-custom-spin {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #007acc;
  background-image: -moz-linear-gradient(top, #0088cc, #0066cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0066cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0066cc);
  background-image: -o-linear-gradient(top, #0088cc, #0066cc);
  background-image: linear-gradient(to bottom, #0088cc, #0066cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0066cc', GradientType=0);
  border-color: #0066cc #0066cc #004080;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #0066cc;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-custom-spin:hover,
.btn-custom-spin:focus,
.btn-custom-spin:active,
.btn-custom-spin.active,
.btn-custom-spin.disabled,
.btn-custom-spin[disabled] {
  color: #ffffff;
  background-color: #0066cc;
  *background-color: #0059b3;
}
.btn-custom-spin:active,
.btn-custom-spin.active {
  background-color: #004c99 ;
}

Your button (lighten):

Your CSS code:

Your button (darken):

Your CSS code:

Your button (spin):

Your CSS code:

references/tools:

Other generators:

Useful links:

Contact: