Skip to content

Instantly share code, notes, and snippets.

@claviska

claviska/pretty-buttons.less

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.
Download ZIP
A Less mixin' for pretty buttons with Bootstrap 3
Raw
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);
}
*/
@bertoost
Copy link

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);
  }
}

@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