SecureCloud-biz
9/27/2015 - 10:47 PM

A Less mixin' for pretty buttons with Bootstrap 3

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

*/