A Less Implementation of the Bootstrap Buttons Generator

bootstrap_buttons.less

.customButton(@cHue: 201, @cSaturation: 1, @cLightness: .4, @cDelta: .1, @cMultiplier: 1.5) {
   .cTextColor(@a, @b) when (@a < .5) { color: #fff; .cAlphaShadow(0, -1, 1, 0, (@b * 3.3)); }
   .cTextColor(@a, @b) when (@a > .5) { color: #333; .cAlphaShadow(0, 1, 1, 255, (@b * 3.3)); }
   .cTextColor(@a) { -webkit-font-smoothing: antialiased; }
   .cAlphaShadow(@a, @b, @c, @d, @e) when (@e > 1) { text-shadow: (0px + @a) (0px + @b) (0px + @c) rgba(@d, @d, @d, 1); }
   .cAlphaShadow(@a, @b, @c, @d, @e) when (@e < 1) { text-shadow: (0px + @a) (0px + @b) (0px + @c) rgba(@d, @d, @d, @e); }
   
   @cHighlight: percentage(@cLightness + @cDelta);
   @cLowlight: percentage(@cLightness - @cDelta);
   @cSuperLowLight: percentage(@cLightness - @cDelta * @cMultiplier);

   @cColor: hsl(percentage(@cHue), percentage(@cSaturation), @cHighlight);
   @cEndColor: hsl(percentage(@cHue), percentage(@cSaturation), @cLowlight);
   @cBorderColor: hsl(percentage(@cHue), percentage(@cSaturation), @cSuperLowLight);
  
   background-color: @cColor;
   background-repeat: repeat-x;
   background-image: -khtml-gradient(linear, left top, left bottom, from(@cColor), to(@cEndColor));
   background-image: -moz-linear-gradient(top, @cColor, @cEndColor);
   background-image: -ms-linear-gradient(top, @cColor, @cEndColor);
   background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@cColor), to(@cEndColor));
   background-image: -webkit-linear-gradient(top, @cColor, @cEndColor);
   background-image: -o-linear-gradient(top, @cColor, @cEndColor);
   background-image: linear-gradient(@cColor, @cSuperLowLight);
   filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@cColor,@cEndColor));
   border-color: @cEndColor @cEndColor @cBorderColor;
   .cTextColor(@cLightness, @cDelta);
}

.btn {
  &.custom {
     .customButton;
  }
}

A few changes to take background transitions on hover into account:

.customButton(@cHue: 201, @cSaturation: 1, @cLightness: .4, @cDelta: .1, @cMultiplier: 1.5) {
   .cTextColor(@a, @b) when (@a < .5) { color: #fff; .cAlphaShadow(0, -1, 1, 0, (@b * 3.3)); }
   .cTextColor(@a, @b) when (@a > .5) { color: #333; .cAlphaShadow(0, 1, 1, 255, (@b * 3.3)); }
   .cTextColor(@a) { -webkit-font-smoothing: antialiased; }
   .cAlphaShadow(@a, @b, @c, @d, @e) when (@e > 1) { text-shadow: (0px + @a) (0px + @b) (0px + @c) rgba(@d, @d, @d, 1); }
   .cAlphaShadow(@a, @b, @c, @d, @e) when (@e < 1) { text-shadow: (0px + @a) (0px + @b) (0px + @c) rgba(@d, @d, @d, @e); }

   @cHighlight: percentage(@cLightness + @cDelta);
   @cLowlight: percentage(@cLightness - @cDelta);
   @cSuperLowLight: percentage(@cLightness - @cDelta * @cMultiplier);

   @cColor: hsl(percentage(@cHue), percentage(@cSaturation), @cHighlight);
   @cEndColor: hsl(percentage(@cHue), percentage(@cSaturation), @cLowlight);
   @cBorderColor: hsl(percentage(@cHue), percentage(@cSaturation), @cSuperLowLight);

   background-color: @cColor;
   background-repeat: repeat-x;
   background-image: -khtml-gradient(linear, left top, left bottom, from(@cColor), to(@cEndColor));
   background-image: -moz-linear-gradient(top, @cColor, @cEndColor);
   background-image: -ms-linear-gradient(top, @cColor, @cEndColor);
   background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@cColor), to(@cEndColor));
   background-image: -webkit-linear-gradient(top, @cColor, @cEndColor);
   background-image: -o-linear-gradient(top, @cColor, @cEndColor);
   background-image: linear-gradient(@cColor, @cSuperLowLight);
   filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@cColor,@cEndColor));
   border-color: @cEndColor @cEndColor @cBorderColor;
   .cTextColor(@cLightness, @cDelta);

   &:hover{
   background-position: 0 -15px;
   background-color:  @cEndColor;
   .transition(background-position .1s linear);
   }
}

.btn {
  &.custom {
     .customButton;
  }
}

.transition(@duration:0.2s) {
  -webkit-transition: all @duration;
  -moz-transition:  all @duration;
  -o-transition:  all @duration;
  transition:  all @duration;
}