Saya menemukan cara paling sederhana untuk memasukkan ini ke dalam timpaan Anda. Maaf untuk pilihan warna saya yang tidak imajinatif
Bootstrap 4-Alpha SASS
.my-btn {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}
Contoh Bootstrap 4 Alpha SASS
Bootstrap 3 KURANG
.my-btn {
//.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
.button-variant(red; white; blue);
}
Contoh Bootstrap 3 LESS
Bootstrap 3 SASS
.my-btn {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}
Contoh Bootstrap 3 SASS
Bootstrap 2.3 KURANG
.btn-primary {
//.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
.buttonBackground(red, white);
}
Contoh Bootstrap 2.3 KURANG
Bootstrap 2.3 SASS
.btn-primary {
//@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
@include buttonBackground(red, white);
}
Ini akan mengurus hover / aktif untuk Anda
Dari komentar, jika Anda ingin meringankan tombol alih-alih menggelapkan saat menggunakan hitam (atau hanya ingin membalik), Anda perlu memperluas kelas sedikit lebih jauh seperti:
Bootstrap 3 SASS Ligthen
.my-btn {
// @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
$color: #fff;
$background: #000;
$border: #333;
@include button-variant($color, $background, $border);
// override the default darkening with lightening
&:hover,
&:focus,
&.focus,
&:active,
&.active,
.open > &.dropdown-toggle {
color: $color;
background-color: lighten($background, 20%); //10% default
border-color: lighten($border, 22%); // 12% default
}
}
Contoh Bootstrap 3 SASS Lighten
lessc
. Jangan mengedit file CSS secara langsung! Itu tidak bisa dipelihara.