A Less mixin' for pretty buttons with Bootstrap 3

pretty-buttons.less

.pretty-buttons(@color, @background, @text-shadow: none) {
	
	color: @color;
	#gradient > .vertical(lighten(@background, 5%), darken(@background, 5%), 0%, 100%);
	border-color: darken(@background, 10%);
	border-bottom-color: darken(@background, 20%);
	text-shadow: @text-shadow;
	.box-shadow(inset 0 1px 0 rgba(255, 255, 255, .1));
	
	&:hover,
	&:focus,
	&:active,
	&.active {
		#gradient > .vertical(darken(@background, 0), darken(@background, 10%), 0%, 100%);
		border-color: darken(@background, 20%);
		color: @color;
	}
	
	&.disabled,
	&[disabled],
	fieldset[disabled] & {
		&,
		&:hover,
		&:focus,
		&:active,
		&.active {
			background-color: @background;
			border-color: darken(@background, 5%);
		}
	}
}

/* Example usage (uses Bootstrap's Less variables):

.btn-default {
	.pretty-buttons(@btn-default-color, @btn-default-bg);
}
.btn-primary {
	.pretty-buttons(@btn-primary-color, @btn-primary-bg);
}
.btn-success {
	.pretty-buttons(@btn-success-color, @btn-success-bg);
}
.btn-info {
	.pretty-buttons(@btn-info-color, @btn-info-bg);
}
.btn-warning {
	.pretty-buttons(@btn-warning-color, @btn-warning-bg);
}
.btn-danger {
	.pretty-buttons(@btn-danger-color, @btn-danger-bg);
}
.btn-inverse {
	.pretty-buttons(white, #474949);
}

*/

I encountered compile error for this .less, that is the argument declaration of pretty-buttons is semicolon ; instead of , and the parameter sent for #gradient > .vertical was wrong as it should be (color, color, % %).

Here is code I fixed:
.pretty-buttons(@color, @background, @text-shadow: none) {

color: @color;
#gradient > .vertical(lighten(@background, 5%), darken(@background, 5%), 0%, 100%);
border-color: darken(@background, 10%);
border-bottom-color: darken(@background, 20%);
text-shadow: @text-shadow;
.box-shadow(inset 0 1px 0 rgba(255, 255, 255, .1));

&:hover,
&:focus,
&:active,
&.active {
    #gradient > .vertical(darken(@background, 0), darken(@background, 10%), 0%, 100%);
    border-color: darken(@background, 20%);
    color: @color;
}

&.disabled,
&[disabled],
fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: @background;
        border-color: darken(@background, 5%);
    }
}

}

Anyway, thanks for providing such brilliant code.

I needed the SCSS variant of the pretty buttons, so converted it myself. If someone needs its:

@mixin pretty-buttons($color, $background, $text-shadow: none) {

color: $color;
@include gradient-vertical(lighten($background, 5%), darken($background, 5%), 0%, 100%);
border-color: darken($background, 10%);
border-bottom-color: darken($background, 20%);
text-shadow: $text-shadow;
@include box-shadow(inset 0 1px 0 rgba(255, 255, 255, .1));

&:hover,
&:focus,
&:active,
&.active {
    @include gradient-vertical(darken($background, 0), darken($background, 10%), 0%, 100%);
    border-color: darken($background, 20%);
    color: $color;
}

&.disabled,
&[disabled],
fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: $background;
        border-color: darken($background, 5%);
    }
}
}

Thank you very very much!

Thanks! And thanks to psybaron for converting it to SASS!

Many thanks!!
SCSS usages here (and I like the SCSS inheritance setup)

.btn {
  &.btn-default {
    @include pretty-buttons($btn-default-color, $btn-default-bg);
  }
  &.btn-primary {
    @include pretty-buttons($btn-primary-color, $btn-primary-bg);
  }
  &.btn-success {
    @include pretty-buttons($btn-success-color, $btn-success-bg);
  }
  &.btn-info {
    @include pretty-buttons($btn-info-color, $btn-info-bg);
  }
  &.btn-warning {
    @include pretty-buttons($btn-warning-color, $btn-warning-bg);
  }
  &.btn-danger {
    @include pretty-buttons($btn-danger-color, $btn-danger-bg);
  }
  &.btn-inverse {
    @include pretty-buttons(white, #474949);
  }
}

Thanks !

In addition to psybaron and bertoost scss, to get it working out of the box you also need to import some boostrap scss definitions with something like:

@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss";
@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins/_gradients.scss";
@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss";

But finally it seems better to use or start with bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_theme.scss
or bower_components/bootstrap/dist/css/bootstrap-theme.css

This tool is also nice for custom buttons: http://charliepark.org/bootstrap_buttons/ .

Thank you very much it works very well for scss