Disegnare i pulsanti bootstrap di Twitter

I pulsanti Twitter-Bootstrap sono incredibilmente belli. Provali scorrendo sopra di essi

Ma sono limitati nei colori.

C'è un modo per cambiare il colore di base del pulsante mantenendo il bellissimo effetto hover-over che il bootstrap ha reso così bello e senza sforzo?

Sono completamente all'oscuro di come appare il css / javascript che Twitter utilizza per mantenere quegli effetti.

Fondamentalmente, i pulsanti in Twitter Bootstrap sono controllati in CSS da ".btn {}". Quello che devi fare è andare al file CSS e trovare dove dice "btn" e modificare le impostazioni del colore. Tuttavia, non è così semplice come farlo poiché devi anche cambiare il colore in cui cambia il pulsante quando lo evidenzi, ecc. Per farlo, devi cercare altri tag in CSS come ".btn: hover {} ", eccetera.

La modifica richiede la modifica del CSS. Ecco un collegamento rapido a quel file:

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

Ho trovato che il modo più semplice è metterlo nei tuoi override. Scusa per la mia scelta di colori priva di fantasia

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 Esempio

Bootstrap 3 IN MENO

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

Bootstrap 3 LESS Esempio

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 Esempio

Bootstrap 2.3 MENO

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

Bootstrap 2.3 LESS Esempio

Bootstrap 2.3 SASS

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

Si prenderà cura del passaggio del mouse / attivi per te

Dai commenti, se vuoi schiarire il pulsante invece di scurirlo quando usi il nero (o vuoi semplicemente invertire) devi estendere un po 'ulteriormente la classe in questo modo:

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 Example

Puoi sovrascrivere i colori nel tuo css, ad esempio per il pulsante Danger:

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

Ecco una buona risorsa: http://charliepark.org/bootstrap_buttons/

Puoi cambiare colore e vedere l'effetto in azione.

Se stai già caricando il tuo file CSS personalizzato dopo aver caricato bootstrap.css (versione 3), puoi aggiungere questi 2 stili CSS al tuo custom.css e sovrascriveranno i valori predefiniti di bootstrap per lo stile del pulsante predefinito.

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

Invece di cambiare i valori CSS uno per uno, suggerirei di usare MENO. Bootstrap ha una versione MENO su Github: https://github.com/twbs/bootstrap

MENO ti consente di definire variabili per cambiare i colori, il che lo rende molto più conveniente. Definisci il colore una volta e LESS compila il file CSS che modifica i valori a livello globale. Risparmia tempo e fatica.

Per sovrascrivere completamente gli stili dei pulsanti di bootstrap, è necessario sovrascrivere un elenco di proprietà. Vedi l'esempio sotto.

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

Se non utilizzi tutti gli stili elencati, vedrai gli stili predefiniti durante l'esecuzione delle azioni sul pulsante. Ad esempio, una volta che fai clic sul pulsante e rimuovi il puntatore del mouse dal pulsante, vedrai il colore predefinito visibile. Oppure tieni premuto il pulsante vedrai i colori predefiniti. Quindi, ho elencato tutti gli pseudo-stili che devono essere sovrascritti.

Per Bootstrap per Sass sovrascrivere è

.btn-default {

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

}

Puoi vedere la fonte qui: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Oppure prova http://twitterbootstrapbuttons.w3masters.nl/ . Crea css per i pulsanti in base all'input di colore html. Aggiungi il css dopo il bootstrap css. Fornisce tre stili di pulsanti (chiaro, scuro e rotante).

Ecco un modo molto semplice ed efficiente: aggiungi nel tuo CSS la tua classe con i colori che vuoi applicare al tuo pulsante:

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

e aggiungi lo stile al tuo pulsante o link bootstrap:

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

In Twitter Bootstrap bootstrap 3.0.0, il pulsante Twitter è piatto. Puoi personalizzarlo da http://getbootstrap.com/customize . Colore pulsante, bordo radiante ecc.

Inoltre puoi trovare il codice HTML e altre funzionalità http://twitterbootstrap.org/bootstrap-css-buttons .

Il pulsante Bootstrap 2.3.2 è gradiente ma 3.0.0 (nuova versione) piatto e sembra più interessante.

e puoi anche trovare per personalizzare l'intero aspetto e stile del bootstrap da queste risorse: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

So che questo è un thread più vecchio, ma solo per aggiungere un'altra prospettiva. Direi che l'uso di override è davvero un odore di codice e sfuggirà rapidamente di mano su progetti più grandi. Oggi stai sovrascrivendo i pulsanti, i modali di domani, il giorno successivo i menu a discesa, ecc., Ecc.

Consiglierei di provare possibilmente a commentare l'inclusione per buttons.lesse definire la mia oppure trovare un'altra libreria Buttons più adatta al mio progetto. Plug senza vergogna: ecco un esempio di quanto sia facile combinare la nostra libreria di pulsanti con TB: utilizzo di pulsanti con Twitter Bootstrap . In pratica, ancora una volta, probabilmente vorrai rimuovere del buttons.lesstutto l' inclusione per migliorare le prestazioni, ma questo mostra come puoi rendere le cose un po 'meno "generiche". Non ho ancora fatto questo esercizio da solo, ma immagino che potresti iniziare semplicemente commentando righe come:

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

E poi ricompilare usando `lessc usando uno dei tuoi moduli di pulsanti. In questo modo ottieni il nucleo testato in battaglia di TB ma puoi comunque personalizzare le cose senza ricorrere a grandi sostituzioni. Non c'è assolutamente alcun motivo per non utilizzare solo parti di una libreria come Bootstrap. Ovviamente lo stesso vale per la versione Sass di TB

Per Bootstrap (almeno per la versione 3.1.1) e LESS, puoi usare questo:

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

Questo è definito in bootstrap/less/buttons.less.

Puoi cambiare il colore di sfondo e usare! 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;
}