16

我正在尝试为我的按钮使用渐变样式，但是，悬停样式有问题，这是悬停之前的按钮：

在此处输入图像描述

这是悬停之后：

在此处输入图像描述

这是按钮的haml：

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

较少的：

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

请问有什么想法吗？是否可以为悬停状态指定另一种渐变样式？或者至少，悬停时不要更改按钮？

4

5 回答 5

31

Twitter Bootstrapbackground-position使用过渡动画悬停（因为背景渐变不能有过渡）。在您的情况下发生的情况是，背景渐变随着 向上移动background-position: -15px，并且您看到了下面的背景颜色。

要解决此问题background-color，请将悬停时按钮渐变的底部颜色设置为：

.tour_btn {
    #gradient > .vertical(#F98C51, #a35b35);
    &:hover { background-color: #a35b35 }
}
于 2012-09-19T20:00:21.050 回答
6

如果您为按钮设置了背景图像，则背景会15px在悬停时向上移动。您可以将其设置为0px.

.tour_btn:hover {
   background-position: 0px !important;
}
于 2013-03-29T08:19:32.360 回答
5

当使用自定义 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>

在 bootstrap(.min).css 之后添加 CSS 使用这个 css 可以让您自定义按钮效果在大多数浏览器中工作。

于 2013-03-29T10:33:26.547 回答
4

您可以使用 css :hover 属性指定您希望当按钮悬停时的 CSS 内容。

所以在你的情况下，你会想要做类似的事情

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

使用 chrome 开发人员工具，您应该能够看到引导程序当前正在应用哪种渐变，然后用您的 css 覆盖它们。

于 2012-09-19T19:51:42.877 回答
1 
.tour_btn:hover {
     background-color: #a35b35;
     background-position: 30px 30px;
}

我找到了这个解决方案，你可以试试这个。它适用于简单的代码

于 2015-06-26T07:47:43.537 回答