Стилізація кнопок завантажувального твіттера

Кнопки Twitter-Bootstrap надзвичайно красиві. Спробуйте їх, прокрутивши їх

Але вони обмежені у кольорах.

Чи є спосіб змінити базовий колір кнопки, зберігаючи прекрасний ефект наведення курсору, який завантажувальний ремінь зробив таким гарним і невимушеним?

Я абсолютно не знаю, як виглядає css / javascript, який Twitter використовує для підтримки цих ефектів.

В основному кнопками в Twitter Bootstrap керує CSS за допомогою ".btn {}". Вам потрібно перейти до файлу CSS і знайти там, де написано "btn", і змінити налаштування кольору. Однак це не так просто, як просто зробити це, оскільки вам також потрібно змінити, в який колір кнопка змінюється, коли ви її виділяєте, і т. Д. Щоб це зробити, вам потрібно шукати інші теги в CSS, наприклад ".btn: hover {} "тощо.

Його зміна вимагає зміни CSS. Ось коротке посилання на цей файл:

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

Я виявив, що найпростіший спосіб - це помістити у свої заміни. Вибачте за мій невигадливий вибір кольору

Bootstrap 4-Alpha SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Приклад Bootstrap 4 Alpha SASS

Bootstrap 3 МЕНШЕ

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Приклад завантаження 3 МЕНШЕ

Bootstrap 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Приклад Bootstrap 3 SASS

Bootstrap 2.3 МЕНШЕ

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

Приклад завантаження 2.3 МЕНШЕ

Bootstrap 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

Він подбає про наведення / активні елементи для вас

З коментарів, якщо ви хочете освітлити кнопку, а не затемнити при використанні чорного (або просто інверсувати), вам потрібно трохи розширити клас приблизно так:

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

Приклад Bootstrap 3 SASS Lighten

Ви можете перезаписати кольори у своєму css, наприклад для кнопки "Небезпека":

.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]; }

Ось хороший ресурс: http://charliepark.org/bootstrap_buttons/

Ви можете змінити колір і побачити ефект у дії.

Якщо ви вже завантажуєте свій власний CSS-файл після завантаження bootstrap.css (версія 3), ви можете додати ці 2 стилі CSS до вашого custom.css, і вони замінять типові значення завантажувального стилю для типового стилю кнопки.

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

Замість того, щоб змінювати значення CSS по одному, я б запропонував використовувати LESS. Bootstrap має МЕНШУ версію на Github: https://github.com/twbs/bootstrap

LESS дозволяє визначати змінні для зміни кольорів, що робить це набагато зручнішим. Визначте колір один раз, і LESS компілює файл CSS, який змінює значення в усьому світі. Економія часу та сил.

Для того, щоб повністю замінити стилі кнопок завантаження, вам потрібно перевизначити список властивостей. Див. Приклад нижче.

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

Якщо ви не використовуєте всі перераховані стилі, тоді ви побачите стилі за замовчуванням при виконанні дій над кнопкою. Наприклад, як тільки ви натиснете кнопку і видалите вказівник миші з кнопки, ви побачите колір за замовчуванням. Або, утримуючи кнопку натиснутою, ви побачите кольори за замовчуванням. Отже, я перерахував усі псевдостилі, які слід замінити.

Для Bootstrap for Sass це перевизначає

.btn-default {

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

}

Ви можете побачити його джерело тут: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Або спробуйте http://twitterbootstrapbuttons.w3masters.nl/ . Він створює css для кнопок на основі введення кольорів html. Додайте css після bootstrap css. Він забезпечує три стилі кнопок (світлий, темний і віджимання).

Ось дуже простий і ефективний спосіб: додайте у свій CSS свій клас із кольорами, які ви хочете застосувати до своєї кнопки:

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

і додайте стиль до вашої кнопки завантаження або посилання:

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

У Twitter Bootstrap bootstrap 3.0.0 кнопка Twitter є плоскою. Ви можете налаштувати його за адресою http://getbootstrap.com/customize . Кнопка кольору, кордону різкий і т. Д.

Також ви можете знайти HTML-код та інші функції http://twitterbootstrap.org/bootstrap-css-buttons .

Кнопка Bootstrap 2.3.2 градієнтна, але 3.0.0 (нова версія) рівна і виглядає більш круто.

а також ви можете знайти, щоб налаштувати весь зовнішній вигляд і стиль завантажувальної форми з цих ресурсів: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Я знаю, що це давня тема, але лише для того, щоб додати ще одну перспективу. Я стверджую, що використання перевизначень насправді трохи запаху коду і швидко виходить з-під контролю у великих проектах. Сьогодні ви перевизначаєте кнопки, завтра - модалі, наступного дня - випадаючі меню тощо тощо.

Я порадив би спробувати прокоментувати включення buttons.lessі визначити свою власну, або знайти іншу бібліотеку Кнопки, яка більше підходить для мого проекту. Безсоромна вилка: ось приклад того, як легко змішати нашу бібліотеку кнопок з ТБ: Використання кнопок із Twitter Bootstrap . На практиці, знову ж таки, ви, мабуть, захочете buttons.lessвзагалі видалити включення для покращення продуктивності, але це показує, як ви можете зробити речі виглядають дещо менш «загальними». Я ще не робив цієї вправи, але, думаю, ви можете почати з простого коментування таких рядків, як:

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

А потім перекомпілювати за допомогою `lessc, використовуючи один із власних модулів кнопок. Таким чином ви отримаєте перевірене в боях ядро ​​туберкульозу, але все одно можете налаштувати речі, не вдаючись до значних змін. Немає абсолютно жодної причини не використовувати лише ті частини бібліотеки, як Bootstrap. Звичайно, те саме стосується версії туберкульозу Sass

Для Bootstrap (принаймні для версії 3.1.1) і LESS ви можете використовувати це:

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

Це визначено в bootstrap/less/buttons.less.

Ви можете змінити колір фону та використовувати!

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