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);
}
*/
@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