Setting custom Bootstrap button colors - css

Question

The Bootstrap button colors are defined thus in variables.less:
#btnPrimaryBackground: #linkColor;
#btnPrimaryBackgroundHighlight: spin(#btnPrimaryBackground, 20%);
#btnInfoBackground: #5bc0de;
#btnInfoBackgroundHighlight: #2f96b4;
#btnSuccessBackground: #62c462;
#btnSuccessBackgroundHighlight: #51a351;
#btnWarningBackground: lighten(#orange, 15%);
#btnWarningBackgroundHighlight: #orange;
#btnDangerBackground: #ee5f5b;
#btnDangerBackgroundHighlight: #bd362f;
#btnInverseBackground: #444;
#btnInverseBackgroundHighlight: #grayDarker;
Is there some logic in the hex codes for background and backgroundHighlight (i.e. specific color differences between the hex codes) or have they been set arbritrarily based on someone's design perspective that they 'look good'?

Answer 1

You can see that it was set specifically by design. But you could use lighten() or darken() mixins with 5% or 10% values to set highlights. But the same way you could make the whole button from one color :)

Answer 2

I took the relevant LESS code from Bootstrap's source to generate a btn-purple class. The gradient, etc are very similar to the default buttons. You just need to change #backgroundColor and #backgroundColorHighlight in the LESS code below to change the color.
// Gradient Bar Colors for buttons and alerts
.gradientBar(#primaryColor, #secondaryColor, #textColor: #fff, #textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: #textColor;
text-shadow: #textShadow;
#gradient > .vertical(#primaryColor, #secondaryColor);
border-color: #secondaryColor #secondaryColor darken(#secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}
// Gradients
#gradient {
.horizontal(#startColor: #555, #endColor: #333) {
background-color: #endColor;
background-image: -moz-linear-gradient(left, #startColor, #endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#startColor), to(#endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, #startColor, #endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, #startColor, #endColor); // Opera 11.10
background-image: linear-gradient(to right, #startColor, #endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(#startColor),argb(#endColor))); // IE9 and down
}
.vertical(#startColor: #555, #endColor: #333) {
background-color: mix(#startColor, #endColor, 60%);
background-image: -moz-linear-gradient(top, #startColor, #endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#startColor), to(#endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, #startColor, #endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, #startColor, #endColor); // Opera 11.10
background-image: linear-gradient(to bottom, #startColor, #endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(#startColor),argb(#endColor))); // IE9 and down
}
.directional(#startColor: #555, #endColor: #333, #deg: 45deg) {
background-color: #endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(#deg, #startColor, #endColor); // FF 3.6+
background-image: -webkit-linear-gradient(#deg, #startColor, #endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(#deg, #startColor, #endColor); // Opera 11.10
background-image: linear-gradient(#deg, #startColor, #endColor); // Standard, IE10
}
.horizontal-three-colors(#startColor: #00b3ee, #midColor: #7a43b6, #colorStop: 50%, #endColor: #c3325f) {
background-color: mix(#midColor, #endColor, 80%);
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(#startColor), color-stop(#colorStop, #midColor), to(#endColor));
background-image: -webkit-linear-gradient(left, #startColor, #midColor #colorStop, #endColor);
background-image: -moz-linear-gradient(left, #startColor, #midColor #colorStop, #endColor);
background-image: -o-linear-gradient(left, #startColor, #midColor #colorStop, #endColor);
background-image: linear-gradient(to right, #startColor, #midColor #colorStop, #endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(#startColor),argb(#endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(#startColor: #00b3ee, #midColor: #7a43b6, #colorStop: 50%, #endColor: #c3325f) {
background-color: mix(#midColor, #endColor, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#startColor), color-stop(#colorStop, #midColor), to(#endColor));
background-image: -webkit-linear-gradient(#startColor, #midColor #colorStop, #endColor);
background-image: -moz-linear-gradient(top, #startColor, #midColor #colorStop, #endColor);
background-image: -o-linear-gradient(#startColor, #midColor #colorStop, #endColor);
background-image: linear-gradient(#startColor, #midColor #colorStop, #endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(#startColor),argb(#endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(#innerColor: #555, #outerColor: #333) {
background-color: #outerColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#innerColor), to(#outerColor));
background-image: -webkit-radial-gradient(circle, #innerColor, #outerColor);
background-image: -moz-radial-gradient(circle, #innerColor, #outerColor);
background-image: -o-radial-gradient(circle, #innerColor, #outerColor);
background-repeat: no-repeat;
}
.striped(#color: #555, #angle: 45deg) {
background-color: #color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(#angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(#angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(#angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(#angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}
}
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
.buttonBackground(#startColor, #endColor, #textColor: #fff, #textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(#startColor, #endColor, #textColor, #textShadow);
*background-color: #endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
.reset-filter();
// in these cases the gradient won't cover the background, so we override
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
color: #textColor;
background-color: #endColor;
*background-color: darken(#endColor, 5%);
background-position: 0 -15px;
}
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
&:active,
&.active {
background-color: darken(#endColor, 10%) e("\9");
}
}
// Provide *some* extra contrast for those who can get it
.btn-purple.active {
color: rgba(255,255,255,.75);
}
// Set the backgrounds
// -------------------------
#backgroundColor: lighten(#7a43b6, 10%);
#backgroundColorHighlight: darken(#7a43b6, 5%);
.btn-purple {
.buttonBackground(#backgroundColor, #backgroundColorHighlight);
}