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

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.

@markovic131
Copy link

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

@matheo
Copy link

matheo commented Sep 15, 2014

Thank you very very much!

@robinzimmermann
Copy link

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

@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