Stylizacja przycisków typu twitter bootstrap

Przyciski Twitter-Bootstrap są niesamowicie piękne. Wypróbuj je, przewijając je

Ale są ograniczone w kolorach.

Czy jest jakiś sposób, żebym mógł zmienić podstawowy kolor przycisku, zachowując jednocześnie piękny efekt najechania kursorem, który dzięki bootstrapowi był tak piękny i łatwy?

Jestem całkowicie nieświadomy tego, jak wygląda css / javascript, którego używa twitter do utrzymania tych efektów.

Zasadniczo przyciski w Twitter Bootstrap są kontrolowane w CSS przez „.btn {}”. Musisz tylko przejść do pliku CSS i znaleźć tam, gdzie jest napisane „btn”, i zmienić ustawienia kolorów. Jednak nie jest to tak proste, jak samo zrobienie tego, ponieważ musisz również zmienić kolor przycisku, który zmienia się po jego podświetleniu itp. Aby to zrobić, musisz szukać innych tagów w CSS, takich jak ".btn: hover {} ”itp.

Zmiana wymaga zmiany CSS. Oto szybki link do tego pliku:

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

Odkryłem, że najprostszym sposobem jest umieszczenie tego w swoich nadpisaniach. Przepraszam za mój niewyobrażalny wybór koloru

Bootstrap 4-Alpha SASS

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

Przykład Bootstrap 4 Alpha SASS

Bootstrap 3 MNIEJ

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

Przykład Bootstrap 3 MNIEJ

Bootstrap 3 SASS

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

Przykład Bootstrap 3 SASS

Bootstrap 2.3 MNIEJ

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

Bootstrap 2.3 MNIEJ Przykład

Bootstrap 2.3 SASS

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

Za Ciebie zadba o najechanie / aktywowanie

Z komentarzy, jeśli chcesz rozjaśnić przycisk zamiast przyciemniać podczas używania czerni (lub po prostu chcesz odwrócić), musisz rozszerzyć klasę nieco dalej:

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

Przykład Bootstrap 3 SASS Lighten

Możesz nadpisać kolory w swoim css, na przykład dla przycisku Niebezpieczeństwo:

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

Oto dobre źródło: http://charliepark.org/bootstrap_buttons/

Możesz zmienić kolor i zobaczyć efekt w akcji.

Jeśli już ładujesz swój własny niestandardowy plik CSS po załadowaniu pliku bootstrap.css (wersja 3), możesz dodać te 2 style CSS do pliku custom.css i nadpisują one domyślne ustawienia ładowania początkowego dla domyślnego stylu przycisku.

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

Zamiast zmieniać wartości CSS jeden po drugim, sugerowałbym użycie LESS. Bootstrap ma MNIEJSZĄ wersję na Github: https://github.com/twbs/bootstrap

MNIEJ pozwala zdefiniować zmienne w celu zmiany kolorów, co czyni to o wiele wygodniejszym. Zdefiniuj kolor raz, a MNIEJ kompiluje plik CSS, który globalnie zmienia wartości. Oszczędza czas i wysiłek.

Aby całkowicie zastąpić style przycisków ładowania początkowego, należy przesłonić listę właściwości. Zobacz poniższy przykład.

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

Jeśli nie użyjesz wszystkich wymienionych stylów, zobaczysz style domyślne podczas wykonywania czynności na przycisku. Na przykład, gdy klikniesz przycisk i usuniesz wskaźnik myszy z przycisku, zobaczysz domyślny kolor. Lub trzymając wciśnięty przycisk, zobaczysz kolory domyślne. Dlatego wymieniłem wszystkie pseudo style, które mają zostać zastąpione.

W przypadku Bootstrap for Sass zastąp to

.btn-default {

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

}

Możesz zobaczyć jego źródło tutaj: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Lub spróbuj http://twitterbootstrapbuttons.w3masters.nl/ . Tworzy css dla przycisków na podstawie danych wejściowych koloru HTML. Dodaj css po css bootstrap. Zapewnia trzy style przycisków (jasny, ciemny i spin).

Oto bardzo łatwy i skuteczny sposób: dodaj do CSS swoją klasę z kolorami, które chcesz zastosować do przycisku:

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

i dodaj styl do przycisku lub łącza bootstrap:

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

W Twitter Bootstrap bootstrap 3.0.0 przycisk Twittera jest płaski. Możesz go dostosować ze strony http://getbootstrap.com/customize . Kolor przycisku, radialna ramka itp.

Możesz również znaleźć kod HTML i inne funkcje http://twitterbootstrap.org/bootstrap-css-buttons .

Przycisk Bootstrap 2.3.2 jest gradientowy, ale 3.0.0 (nowa wersja) płaski i wygląda fajniej.

a także możesz znaleźć możliwość dostosowania całego wyglądu i stylu bootstrap z tych zasobów: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Wiem, że to starszy wątek, ale żeby dodać inną perspektywę. Twierdzę, że używanie nadpisań to naprawdę trochę zapach kodu i szybko wymknie się spod kontroli w przypadku większych projektów. Dziś nadpisujesz Przyciski, jutro Modały, następnego dnia Rozwijane menu itp.

Radziłbym spróbować skomentować dołączenie dla buttons.lessi zdefiniować własne lub znaleźć inną bibliotekę Buttons, która jest bardziej odpowiednia dla mojego projektu. Bezwstydna wtyczka: oto przykład, jak łatwo jest połączyć naszą bibliotekę Buttons z TB: Używanie przycisków z Twitter Bootstrap . W praktyce znowu prawdopodobnie zechcesz buttons.lesscałkowicie usunąć dołączenie, aby poprawić wydajność, ale to pokazuje, jak możesz sprawić, by rzeczy wyglądały nieco mniej „generycznie”. Nie wykonałem jeszcze tego ćwiczenia, ale wyobrażam sobie, że możesz zacząć od prostego komentowania linii, takich jak:

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

A potem przekompiluj używając `lessc używając jednego z własnych modułów przycisków. W ten sposób otrzymujesz przetestowany w walce rdzeń TB, ale nadal możesz dostosowywać rzeczy bez uciekania się do poważnych zastąpień. Nie ma absolutnie żadnego powodu, aby nie używać tylko części biblioteki, takich jak Bootstrap. Oczywiście to samo dotyczy wersji TB Sass

W przypadku Bootstrap (przynajmniej dla wersji 3.1.1) i LESS możesz użyć tego:

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

Jest to zdefiniowane w bootstrap/less/buttons.less.

Możesz zmienić kolor tła i użyć! Ważne;

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