Skip to content

Instantly share code, notes, and snippets.

@claviska
Last active October 21, 2022 22:25
Show Gist options
  • Save claviska/6117193 to your computer and use it in GitHub Desktop.
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