Styling von Twitter Bootstrap Buttons

Twitter-Bootstrap-Buttons sind unglaublich schön. Probieren Sie sie aus, indem Sie über sie scrollen

Aber sie sind in den Farben begrenzt.

Gibt es eine Möglichkeit, die Grundfarbe des Buttons zu ändern und gleichzeitig den schönen Hover-Over-Effekt beizubehalten, den Bootstrap so schön und mühelos gemacht hat?

Ich weiß überhaupt nicht, wie das CSS / Javascript aussieht, das Twitter verwendet, um diese Effekte aufrechtzuerhalten.

Grundsätzlich werden die Schaltflächen in Twitter Bootstrap in CSS durch ".btn {}" gesteuert. Was Sie tun müssen, ist, in die CSS-Datei zu gehen und herauszufinden, wo "btn" steht, und die Farbeinstellungen zu ändern. Es ist jedoch nicht so einfach, dies zu tun, da Sie auch ändern müssen, in welche Farbe sich die Schaltfläche ändert, wenn Sie sie markieren usw. Um dies zu tun, müssen Sie in CSS nach anderen Tags wie ".btn: hover {}" suchen ", etc.

Das Ändern erfordert das Ändern des CSS. Hier ist ein kurzer Link zu dieser Datei:

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

Ich fand, der einfachste Weg ist, dies in Ihre Overrides zu setzen. Entschuldigung für meine einfallslose Farbwahl

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 Beispiel

Bootstrap 3 WENIGER

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

Bootstrap 3 WENIGER Beispiel

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 Beispiel

Bootstrap 2.3 WENIGER

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

Bootstrap 2.3 WENIGER Beispiel

Bootstrap 2.3 SASS

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

Es kümmert sich für Sie um den Schwebeflug / die Aktiva

Wenn Sie in den Kommentaren die Schaltfläche aufhellen möchten, anstatt sie zu verdunkeln, wenn Sie Schwarz verwenden (oder nur umkehren möchten), müssen Sie die Klasse ein wenig weiter ausdehnen, wie folgt:

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 Beispiel

Sie können die Farben in Ihrem CSS überschreiben, z. B. für die Schaltfläche Gefahr:

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

Hier ist eine gute Ressource: http://charliepark.org/bootstrap_buttons/

Sie können die Farbe ändern und den Effekt in Aktion sehen.

Wenn Sie nach dem Laden von bootstrap.css (Version 3) bereits Ihre eigene benutzerdefinierte CSS-Datei laden, können Sie diese beiden CSS-Stile zu custom.css hinzufügen. Diese überschreiben die Bootstrap-Standardeinstellungen für den Standardschaltflächenstil.

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

Anstatt die CSS-Werte einzeln zu ändern, würde ich empfehlen, WENIGER zu verwenden . Bootstrap hat eine WENIGER Version auf Github: https://github.com/twbs/bootstrap

WENIGER ermöglicht es Ihnen, Variablen zu definieren, um Farben zu ändern, was es so viel bequemer macht. Definieren Sie die Farbe einmal und WENIGER kompiliert eine CSS-Datei, die die Werte global ändert. Spart Zeit und Mühe.

Um die Bootstrap-Schaltflächenstile vollständig zu überschreiben, müssen Sie eine Liste von Eigenschaften überschreiben. Siehe das folgende Beispiel.

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

Wenn Sie nicht alle aufgelisteten Stile verwenden, werden die Standardstile beim Ausführen von Aktionen auf der Schaltfläche angezeigt. Wenn Sie beispielsweise auf die Schaltfläche klicken und den Mauszeiger von der Schaltfläche entfernen, wird die Standardfarbe angezeigt. Oder halten Sie die Taste gedrückt, um die Standardfarben anzuzeigen. Also habe ich alle Pseudo-Stile aufgelistet, die überschrieben werden sollen.

Für Bootstrap for Sass überschreiben ist es

.btn-default {

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

}

Die Quelle dafür finden Sie hier: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Oder versuchen Sie es mit http://twitterbootstrapbuttons.w3masters.nl/ . Es erstellt CSS für Schaltflächen basierend auf der Eingabe von HTML-Farben. Fügen Sie das CSS nach dem Bootstrap-CSS hinzu. Es bietet drei Arten von Schaltflächen (hell, dunkel und drehen).

Hier ist eine sehr einfache und effiziente Möglichkeit: Fügen Sie in Ihrem CSS Ihre Klasse mit den Farben hinzu, die Sie auf Ihre Schaltfläche anwenden möchten:

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

und fügen Sie den Stil Ihrer Bootstrap-Schaltfläche oder Ihrem Bootstrap-Link hinzu:

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

In Twitter Bootstrap Bootstrap 3.0.0 ist die Twitter-Schaltfläche flach. Sie können es unter http://getbootstrap.com/customize anpassen . Tastenfarbe, Rand strahlend etc.

Sie finden auch den HTML-Code und andere Funktionen http://twitterbootstrap.org/bootstrap-css-buttons .

Die Bootstrap 2.3.2-Taste hat einen Farbverlauf, aber 3.0.0 (neue Version) ist flach und sieht cooler aus.

Außerdem können Sie das gesamte Erscheinungsbild und den Stil des Bootstraps in diesen Ressourcen anpassen: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Ich weiß, dass dies ein älterer Thread ist, aber nur um eine andere Perspektive hinzuzufügen. Ich würde behaupten, dass die Verwendung von Überschreibungen wirklich ein bisschen nach Code riecht und bei größeren Projekten schnell außer Kontrolle gerät. Heute überschreiben Sie Buttons, morgen Modals, am nächsten Tag Dropdowns usw. usw.

Ich würde empfehlen, das Include für möglicherweise zu kommentieren buttons.lessund entweder mein eigenes zu definieren oder eine andere Buttons-Bibliothek zu finden, die besser zu meinem Projekt passt. Schamloser Plug: Hier ist ein Beispiel dafür, wie einfach es ist, unsere Buttons-Bibliothek mit TB zu mischen: Verwenden von Buttons mit Twitter Bootstrap . In der Praxis möchten Sie das buttons.lessInclude wahrscheinlich wieder ganz entfernen , um die Leistung zu verbessern. Dies zeigt jedoch, wie Sie dafür sorgen können, dass die Dinge etwas weniger "allgemein" aussehen. Ich habe diese Übung noch nicht selbst gemacht, aber ich würde mir vorstellen, dass Sie zunächst einfach folgende Zeilen auskommentieren könnten:

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

Und dann mit `lessc mit einem Ihrer eigenen Tastenmodule neu kompilieren. Auf diese Weise erhalten Sie den kampferprobten Kern von TB, können jedoch die Dinge anpassen, ohne auf größere Überschreibungen zurückgreifen zu müssen. Es gibt absolut keinen Grund, nicht nur Teile einer Bibliothek wie Bootstrap zu verwenden. Gleiches gilt natürlich auch für die Sass-Version von TB

Für Bootstrap (zumindest für Version 3.1.1) und WENIGER können Sie Folgendes verwenden:

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

Dies ist definiert in bootstrap/less/buttons.less .

Sie können die Hintergrundfarbe ändern und! Wichtig verwenden;

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