Styling tombol bootstrap twitter

Tombol Twitter-Bootstrap luar biasa indah. Cobalah dengan menggulirnya

Tapi warnanya terbatas.

Adakah cara saya bisa mengubah warna dasar tombol sambil mempertahankan efek hover-over yang indah yang dibuat oleh bootstrap begitu indah dan mudah?

Saya sama sekali tidak menyadari seperti apa css / javascript yang digunakan twitter untuk mempertahankan efek tersebut.

Pada dasarnya, tombol di Twitter Bootstrap dikontrol di CSS oleh ".btn {}". Yang harus Anda lakukan adalah pergi ke file CSS dan temukan di mana dikatakan "btn" dan ubah pengaturan warnanya. Namun, ini tidak sesederhana hanya melakukan itu karena Anda juga harus mengubah warna tombol saat Anda menyorotnya, dll. Untuk melakukan ITU, Anda harus mencari tag lain di CSS seperti ".btn: hover {} ", dll.

Mengubahnya membutuhkan perubahan pada CSS. Berikut ini tautan cepat ke file itu:

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

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

Anda dapat menimpa warna di css Anda, misalnya untuk tombol Bahaya:

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

Ini adalah sumber yang bagus: http://charliepark.org/bootstrap_buttons/

Anda dapat mengubah warna dan melihat efeknya beraksi.

Jika Anda sudah memuat file CSS khusus Anda sendiri setelah memuat bootstrap.css (versi 3) Anda dapat menambahkan 2 gaya CSS ini ke custom.css Anda dan mereka akan menimpa default bootstrap untuk gaya tombol default.

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

.btn
{
  background-color: #9F418F;
  border-color: #9F418F;
}

Alih-alih mengubah nilai CSS satu per satu, saya sarankan untuk menggunakan LESS. Bootstrap memiliki versi KURANG di Github: https://github.com/twbs/bootstrap

LESS memungkinkan Anda untuk menentukan variabel untuk mengubah warna yang membuatnya jauh lebih nyaman. Tentukan warna sekali dan LESS mengkompilasi file CSS yang mengubah nilai secara global. Menghemat waktu dan tenaga.

Untuk mengganti gaya tombol bootstrap sepenuhnya, Anda perlu mengganti daftar properti. Lihat contoh di bawah ini.

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

Jika Anda tidak menggunakan semua gaya yang terdaftar maka Anda akan melihat gaya default saat melakukan tindakan pada tombol. Misalnya setelah Anda mengklik tombol dan menghapus penunjuk mouse dari tombol, Anda akan melihat warna default terlihat. Atau terus tekan tombol Anda akan melihat warna default. Jadi, saya telah membuat daftar semua gaya semu yang akan diganti.

Untuk Bootstrap untuk Sass menimpanya

.btn-default {

    @include button-variant($color, $background, $border);

}

Anda dapat melihat sumbernya di sini: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Atau coba http://twitterbootstrapbuttons.w3masters.nl/ . Ini menciptakan css untuk tombol berdasarkan input warna html. Tambahkan css setelah bootstrap css. Ini menyediakan tiga gaya tombol (terang, gelap dan berputar).

Berikut adalah cara yang sangat mudah dan efisien: tambahkan CSS Anda kelas Anda dengan warna yang ingin Anda terapkan pada tombol Anda:

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

dan tambahkan gaya ke tombol atau tautan bootstrap Anda:

<a href="xxx" class="btn btn-info my-btn">aaa</a>

Di Twitter Bootstrap bootstrap 3.0.0, tombol Twitter berbentuk datar. Anda dapat menyesuaikannya dari http://getbootstrap.com/customize . Warna tombol, tepi berseri-seri, dll.

Anda juga dapat menemukan kode HTML dan fungsionalitas lainnya http://twitterbootstrap.org/bootstrap-css-buttons .

Tombol bootstrap 2.3.2 adalah gradien tetapi 3.0.0 (rilis baru) datar dan terlihat lebih keren.

dan juga Anda dapat menemukan untuk menyesuaikan seluruh tampilan dan gaya bootstrap dari sumber daya ini: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Saya tahu ini adalah utas yang lebih lama, tetapi hanya untuk menambahkan perspektif lain. Saya akan menegaskan bahwa menggunakan timpaan benar-benar sedikit berbau kode dan akan segera lepas kendali pada proyek yang lebih besar. Hari ini Anda mengesampingkan Tombol, besok Modals, hari berikutnya Dropdown, dll., Dll.

Saya menyarankan untuk mencoba mengomentari include untuk buttons.lessdan menentukan milik saya sendiri, atau, temukan pustaka Buttons lain yang lebih cocok untuk proyek saya. Steker tak tahu malu: berikut adalah contoh betapa mudahnya mencampur perpustakaan Tombol kami dengan TB: Menggunakan Tombol dengan Bootstrap Twitter . Dalam praktiknya, sekali lagi, Anda mungkin ingin menghapus semua buttons.lesspenyertaan untuk meningkatkan kinerja, tetapi ini menunjukkan bagaimana Anda dapat membuat sesuatu terlihat sedikit kurang "umum". Saya sendiri belum melakukan latihan ini, tetapi saya membayangkan Anda dapat memulai hanya dengan mengomentari baris seperti:

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

Dan kemudian kompilasi ulang menggunakan `lessc menggunakan salah satu modul tombol Anda sendiri. Dengan cara itu Anda mendapatkan inti TB yang diuji dalam pertempuran, tetapi masih dapat menyesuaikan berbagai hal tanpa menggunakan penggantian utama. Sama sekali tidak ada alasan untuk tidak menggunakan hanya bagian dari pustaka seperti Bootstrap. Tentu saja hal yang sama berlaku untuk TB versi Sass

Untuk Bootstrap (setidaknya untuk versi 3.1.1) dan LESS, Anda dapat menggunakan ini:

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

Ini didefinisikan dalam bootstrap/less/buttons.less.

Anda dapat mengubah warna latar belakang dan menggunakan! Important;

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}