Twitter-бутстрап, стиль наведения кнопок?

Я пытаюсь использовать стиль градиента для своих кнопок, но у меня проблема с наведением стиля, Вот кнопка до наведения:

enter image description here

И вот после наведения:

enter image description here

Вот haml кнопки:

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

LESS:

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

Любая идея, пожалуйста? можно ли указать другой стиль градиента для состояния зависания? Или, по крайней мере, не менять кнопку при наведении курсора?

Ответы

Ответ 1

Twitter Bootstrap оживляет background-position при наведении с переходом (поскольку фоновые градиенты не могут иметь переход). Что происходит в вашем случае, фоновый градиент смещается вверх с помощью background-position: -15px, и вы видите фоновый цвет внизу.

Чтобы исправить это, установите background-color нижний цвет градиента кнопок при наведении:

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

Ответ 2

Если у вас есть фоновое изображение для кнопки, фон смещается вверх на 15px при наведении. Вы можете установить его на 0px.

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

Ответ 3

При использовании пользовательских css вместо LESS для стилизации ваших кнопок, попробуйте http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874E. Вы получите все css для своих пользовательских кнопок, включая эффект зависания и отключенные/активные состояния.

Для кнопки выше вы можете использовать возможность:

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

использование:

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

Добавьте CSS ниже/после загрузки (.min).css С помощью этого css вы можете создавать собственные эффекты кнопок в большинстве браузеров.

Ответ 4

вы можете указать, что вы хотите, чтобы CSS был, когда кнопка зависает с свойством css: hover.

Итак, в вашем случае вы захотите сделать что-то вроде

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

Используя инструменты разработчика Chrome, вы сможете увидеть, какие градиенты применяются в настоящее время при загрузке, а затем переопределить их с помощью css.

Ответ 5

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

Я нашел это решение, вы можете попробовать это. он работает с простым кодом