Twitter bootstrap, botones al estilo hover?

Question

estoy tratando de usar el estilo gradiente de mis botones, pero, tengo un problema con el estilo de vuelo estacionario, Aquí está el botón antes de la libración:

Y aquí es después de la libración:

Aquí es haml del botón:

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

MENOS:

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

¿Alguna idea por favor? ¿es posible especificar otro estilo de degradado para el estado de desplazamiento? O al menos, para no cambiar el botón cuando se pasa el mouse?

Answer 1

Twitter Bootstrap anima el background-position en vuelo estacionario con una transición (desde el fondo gradientes no pueden tener una transición). Lo que está sucediendo en su caso es que el gradiente de fondo se está cambiando con background-position: -15px, y está viendo el color de fondo debajo.

Para solucionar este conjunto de su background-color al color inferior de su gradiente de botón en vuelo estacionario:

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

Answer 2

puede especificar lo que quiere el CSS a ser cuando un botón se asoma con el css: flotar propiedad.

Así, en su caso, usted va a querer hacer algo como

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

El uso de herramientas para desarrolladores de Chrome que debe ser capaz de ver qué tipo de gradientes actualmente están siendo aplicadas por arranque y luego anular con su css.

Answer 3

Si usted tiene una imagen de un fondo establecido para un botón, el fondo se desplaza hacia arriba por 15px en vuelo estacionario. Puede configurarlo en 0px.

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

Answer 4

Al usar CSS personalizado en lugar del MENOS el estilo de su botones, intente http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874E. Obtendrá todos los CSS para sus botones personalizados, incluido el efecto de desplazamiento y los estados desactivados/activos.

para el botón anterior se puede usar posible:

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

uso:

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

añadir CSS abajo/después de su arranque (.min) Css El uso de este css del dejas personalizada los efectos de botón funcionan en la mayoría de los navegadores.

Answer 5

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

He encontrado esta solución, puede intentarlo. funciona con código simple