調整 Bootstrap 4 按鈕的顏色 (Change Bootstrap 4 button color)

Bootstrap 4 的按鈕配色個人覺得比較硬,想改回 Bootstrap 3 的按鈕配色於是就用覆蓋樣式的方式依照 Boostrap 4 的樣式設定調整顏色。

( LESS 格式,因為 WordPress bug 把 & 給 escape 了,複製後得把 & 改回 & )

#bundle() {
	.btnStyle {
		color: @color;
		background-color: @background-color;
		border-color: @border-color;
		&:hover {
			color: @color;
			background-color: @background-color-hover;
			border-color: @border-color-hover;
		}
		&.focus, &:focus {
			box-shadow: @box-shadow;
		}
		&.disabled, &:disabled {
			color: @color;
			background-color: @background-color;
			border-color: @border-color;
		}
		&:not(:disabled):not(.disabled).active
		, &:not(:disabled):not(.disabled):active
		, .show > &.dropdown-toggle {
			color: @color;
			background-color: @background-color-hover;
			border-color: @border-color-hover;
		}
		&:not(:disabled):not(.disabled):active:focus
		, &:not(:disabled):not(.disabled).active:focus
		, .show > &.dropdown-toggle:focus {
			box-shadow: @box-shadow;
		}
	}
}

.btn-primary {
	@color: #fff;
	@background-color: #0275d8;
	@border-color: #0275d8;
	@background-color-hover: #025aa5;
	@border-color-hover: #01549b;
	@box-shadow: 0 0 0 .2rem rgba(2, 117, 216, .5);
	#bundle.btnStyle();
}

.btn-secondary {
	@color: #292b2c;
	@background-color: #fff;
	@border-color: #ccc;
	@background-color-hover: #e6e6e6;
	@border-color-hover: #adadad;
	@box-shadow: 0 0 0 .2rem rgba(204, 204, 204, .5);
	#bundle.btnStyle();
}

.btn-info {
	@color: #fff;
	@background-color: #5bc0de;
	@border-color: #5bc0de;
	@background-color-hover: #31b0d5;
	@border-color-hover: #2aabd2;
	@box-shadow: 0 0 0 .2rem rgba(91, 192, 222, .5);
	#bundle.btnStyle();
}

.btn-success {
	@color: #fff;
	@background-color: #5cb85c;
	@border-color: #5cb85c;
	@background-color-hover: #449d44;
	@border-color-hover: #449d44;
	@box-shadow: 0 0 0 .2rem rgba(92, 184, 92, .5);
	#bundle.btnStyle();
}

.btn-warning {
	@color: #fff;
	@background-color: #f0ad4e;
	@border-color: #f0ad4e;
	@background-color-hover: #ec971f;
	@border-color-hover: #eb9316;
	@box-shadow: 0 0 0 .2rem rgba(240, 173, 78, .5);
	#bundle.btnStyle();
}

.btn-danger {
	@color: #fff;
	@background-color: #d9534f;
	@border-color: #d9534f;
	@background-color-hover: #c9302c;
	@border-color-hover: #c12e2a;
	@box-shadow: 0 0 0 .2rem rgba(217, 83, 79, .5);
	#bundle.btnStyle();
}

.btn-light {
	@color: #212529;
	@background-color: #eceeec;
	@border-color: #eceeec;
	@background-color-hover: #d8dcd8;
	@border-color-hover: #d1d6d1;
	@box-shadow: 0 0 0 .2rem rgba(206, 208, 207, 0.5);
	#bundle.btnStyle();
}

.btn-dark {
	@color: #fff;
	@background-color: #343a40;
	@border-color: #343a40;
	@background-color-hover: #23272b;
	@border-color-hover: #1d2124;
	@box-shadow: 0 0 0 .2rem rgba(82, 88, 93, 0.5);
	#bundle.btnStyle();
}
 
分類: Web technology。這篇內容的永久連結