Styling von Twitter Bootstrap Buttons

96

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

Screenshot der Bootstrap-Schaltfläche

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.

Elias7
quelle
7
Suchen und bearbeiten Sie die weniger Definitionen der Schaltflächen. Kompilieren Sie dann das CSS mit neu lessc. Bearbeiten Sie die CSS-Dateien nicht direkt! Es ist nicht wartbar.
Nalply

Antworten:

25

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

Tanvir Ahmed
quelle
33
Dies ist keine besonders schöne Lösung. Bitte verwenden Sie die anderen Lösungen, die auf WENIGER basieren. Oder passen Sie den Bootstrap über den Variableneditor auf der Website an.
Jesper
5
Überschreiben Sie es einfach ... das Laden Ihrer CSS am Ende kann Ihnen helfen, das Problem zu lösen. Verwenden Sie die gleichen Calss von Bootstrap
Jaimin MosLake
1
Ja, ich wäre definitiv dagegen, die Datei bootstrap.css zu ändern. Wie Jaimin sagte, überschreiben Sie es einfach.
Tim Ludwinski
176

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

chrisan
quelle
17
Sie, mein Herr, sind fantastisch.
Basarat
7
Wie würden Sie dies in scss übersetzen?
Dreyfuzz
1
Führen Sie dann aus lessc, um Ihre Änderungen an CSS zu kompilieren.
Nalply
7
Dreyfuzz Ich verwende kein scss, aber wenn ich mir die Sass-Bootstraps von Drittanbietern ansehe , scheint es, als würden Sie .btn-primary {@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); }Ihre Variablen entsprechend ändern (Entschuldigung für die schreckliche Formatierung)
chrisan
Muss .buttonBackground is undefined in main.lessich irgendetwas in meine weniger aufnehmen?
Himalaya Majumdar
32

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]; }
MikeAr
quelle
7
Ich denke, Sie müssen stylen :focusund :activeauch, oder sonst bekommen Sie manchmal seltsame Farben auf Klicks / Drags ...
Simon East
Einfach, ich mag es.
Nino Škopac
1
Für diejenigen, die dies über die Suche gefunden haben und beim Klicken und Ziehen einer Schaltfläche eine Standardfarbe erhalten, müssen Sie .btn-primary:active:focus {diesen Fall auswählen und überschreiben
Shane Reustle,
27

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

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

Tran Cuong
quelle
2
Dies ist ein Konfigurator. Es ist einfach, wenn Sie es eilig haben, einen Prototyp für den Kunden zu erstellen. Langfristig jedoch nicht wartbar. Was ist, wenn der Konfigurator verschwindet? Daher ist für die reale Sache lessceine bessere Lösung.
Nalply
Ich liebe diese Lösung, obwohl ich mir wünschte, es gäbe eine Möglichkeit, rgb / rgba einzugeben, um die genauen Farben zu erhalten.
Sedrick
@nalply less ist großartig, wenn Sie diesen Schritt bereits ausgeführt haben, aber dieser "Konfigurator" erledigt alles, was zum Generieren von CSS erforderlich ist. Lass es rein und geh. Danach benötigen Sie den Konfigurator nicht mehr.
Moodboom
21

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;
}
Lilster
quelle
12

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.

Petri Tuononen
quelle
11

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.

Rahul Singh
quelle
Diese Methode ist großartig. Es ist das zweite nach der WENIGER Bootstrap-Anpassung
Gianluca Ghettini
5

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).

Bass Jobsen
quelle
1
Dies ist eine Art Konfigurator. Es ist ganz einfach, wenn Sie es eilig haben, einen Prototyp für den Kunden zu erstellen. Langfristig jedoch nicht wartbar. Was ist, wenn der Konfigurator verschwindet? Daher ist für die reale Sache lessceine bessere Lösung.
Nalply
5

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>
Fred
quelle
3

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/

Mujahidul Jahid
quelle
1

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

rauben
quelle
0

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 .

Luís Cruz
quelle
0

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

Rafiqul Islam
quelle