Skip to content

Instantly share code, notes, and snippets.

@warrenparsons
Forked from claviska/pretty-buttons.less
Last active December 23, 2015 13:19
Show Gist options
  • Save warrenparsons/6641692 to your computer and use it in GitHub Desktop.
Save warrenparsons/6641692 to your computer and use it in GitHub Desktop.
This is a work in progress. I needed to reenable gradient buttons in Bootstrap 3 for a project.
// Gradient Buttons
// -------------------------
// Re-enable gradients for Bootstrap 3 buttons
.grad-button(@color, @grad-start, @grad-end, @text-shadow: none) {
color: @color;
#gradient > .vertical(@grad-start, @grad-end, 0%, 100%);
text-shadow: @text-shadow;
.box-shadow(inset 0 1px 0 rgba(255, 255, 255, .1));
&:hover,
&:focus,
&:active,
&.active {
#gradient > .vertical(darken(@grad-start, 0), darken(@grad-end, 10%), 0%, 100%);
color: @color;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: @grad-start;
}
}
}
/* Example usage (uses Bootstrap's Less variables):
.btn-default {
.grad-button(@btn-default-color, @grad-start, @grad-end);
}
.btn-primary {
.pretty-buttons(@btn-primary-color, @grad-start, @grad-end);
}
.btn-success {
.pretty-buttons(@btn-success-color, @grad-start, @grad-end);
}
.btn-info {
.pretty-buttons(@btn-info-color, @grad-start, @grad-end);
}
.btn-warning {
.pretty-buttons(@btn-warning-color, @grad-start, @grad-end);
}
.btn-danger {
.pretty-buttons(@btn-danger-color, @grad-start, @grad-end);
}
.btn-inverse {
.pretty-buttons(white, #474949);
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment