Skip to content

Instantly share code, notes, and snippets.

@claviska
Last active September 30, 2025 09:23
Show Gist options
  • Select an option

  • Save claviska/6117193 to your computer and use it in GitHub Desktop.

Select an option

Save claviska/6117193 to your computer and use it in GitHub Desktop.
A Less mixin' for pretty buttons with Bootstrap 3
.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);
}
*/
@luxigo
Copy link

luxigo commented Jan 4, 2016

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/ .

@baloo2401
Copy link

Thank you very much it works very well for scss

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment