Bootstrap su Twitter, pulsanti hover style?

Question

Sto cercando di utilizzare lo stile di pendenza per i miei tasti, ma, ho un problema con lo stile hover, Ecco il pulsante prima comparsa:

Ed ecco, dopo hover:

Ecco Haml del tasto:

= link_to '#', {:class=>'tour_btn btn btn-large btn-primary', :style=>'margin-left: 10px; width: 105px;'} do 
     %h3 
      Take a Tour 

MENO:

.tour_btn { 
    #gradient > .vertical(#F98C51, #a35b35); 
} 

Qualche idea per favore? è possibile specificare un altro stile di sfumatura per lo stato di hover? O almeno, per non cambiare pulsante quando si passa il mouse?

Answer 1

Twitter Bootstrap anima lo background-position al passaggio del mouse con una transizione (poiché i gradienti di sfondo non possono avere una transizione). Quello che sta accadendo nel tuo caso, è che il gradiente di sfondo si sta spostando con background-position: -15px, e sotto trovi il colore di sfondo.

Per risolvere questo problema impostare il vostro background-color al colore di fondo del pulsante gradiente al passaggio del mouse:

.tour_btn { 
    #gradient > .vertical(#F98C51, #a35b35); 
    &:hover { background-color: #a35b35 } 
} 

Answer 2

è possibile specificare ciò che si desidera che il CSS sia quando un pulsante viene spostato con la proprietà css: hover.

Quindi nel tuo caso si vuole fare qualcosa di simile

.tour_btn:hover { 
    /* your custom css */ 
} 

Utilizzando gli strumenti di Chrome per sviluppatori si dovrebbe essere in grado di vedere che tipo di gradienti sono attualmente applicato dal bootstrap e poi sovrascrivere con il css.

Answer 3

Se è stata una impostare un'immagine di sfondo per un pulsante, lo sfondo si sposta da 15px al passaggio del mouse. È possibile impostarlo su 0px.

.tour_btn:hover { 
    background-position: 0px !important; 
} 

Answer 4

Quando si utilizza CSS personalizzato al posto di LESS per lo stile i pulsanti, provare http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874E. Otterrai tutti i css per i pulsanti personalizzati, tra cui l'effetto hover e gli stati disattivati ​​/ attivi.

per il pulsante è possibile utilizzare possibile:

.btn-custom-lighten.active { 
    color: rgba(255, 255, 255, 0.75); 
} 
.btn-custom-lighten { 
    color: #ffffff; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    background-color: #f29461; 
    background-image: -moz-linear-gradient(top, #f1874e, #f5a77d); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1874e), to(#f5a77d)); 
    background-image: -webkit-linear-gradient(top, #f1874e, #f5a77d); 
    background-image: -o-linear-gradient(top, #f1874e, #f5a77d); 
    background-image: linear-gradient(to bottom, #f1874e, #f5a77d); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1874e', endColorstr='#fff5a77d', GradientType=0); 
    border-color: #f5a77d #f5a77d #ef7736; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    *background-color: #f5a77d; 
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 

    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
} 
.btn-custom-lighten:hover, 
.btn-custom-lighten:focus, 
.btn-custom-lighten:active, 
.btn-custom-lighten.active, 
.btn-custom-lighten.disabled, 
.btn-custom-lighten[disabled] { 
    color: #ffffff; 
    background-color: #f5a77d; 
    *background-color: #f39766; 
} 
.btn-custom-lighten:active, 
.btn-custom-lighten.active { 
    background-color: #f1874e ; 
} 

utilizzo:

<button class="btn btn-custom-lighten btn-large">Your button</button> 

Aggiungere il CSS di sotto/dopo che il bootstrap (.min) css Usando questo css vi let personalizzato gli effetti dei pulsanti funzionano nella maggior parte dei browser.

Answer 5

.tour_btn:hover { 
    background-color: #a35b35; 
    background-position: 30px 30px; 
} 

ho trovato questa soluzione si può provare questo. funziona con il semplice codice