Twitter引导，按钮盘旋风格？

我想使用渐变样式为我的按钮，但是，我有悬停的风格问题，这里是悬停前的按钮：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

更少：

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

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

来源

2012-09-19 simo

Twitter Bootstrap在悬停时发生动画background-position（因为背景渐变不能转换）。你的情况正在发生什么，背景渐变正在向上移动background-position: -15px，你会看到底下的背景色。

为了解决这个问题设置你的background-color到您的按钮梯度悬停底色：

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

来源

2012-09-19 20:00:21 Kostia

+1这个答案比我的哈哈更好。 – hajpoj

非常感谢，它工作完美:-) – simo

这是什么原因发生的？背景颜色是否由另一个冲突主题定义？ – Jason

您可以指定当按钮悬停在css：hover属性中时CSS所需的内容。

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

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

使用Chrome开发者工具，你应该能够看到目前正在引导应用什么样的梯度，然后用你的CSS覆盖它们。

来源

2012-09-19 19:51:42 hajpoj

+1澄清如何使用：悬停，准备好要去的答案是如何为Kostia :-) – simo

如果你有一个设置背景图片的按钮，背景由15px悬停上移。您可以将其设置为0px。

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

来源

2013-03-29 08:19:32 codef0rmer

这是什么，我什至不是。 –

感谢您的提示！ –

这对我有效。我并不是说Kostia的回答是错误的，但我不赞同。 – user323094

当使用自定义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咱们你定制之后按钮效果适用于大多数浏览器。

来源

2013-03-29 10:33:26

只需单击按钮生成器工具的链接就可以获得高分。感谢真棒指针！ –

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

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

来源

2015-06-26 07:47:43

Twitter引导，按钮盘旋风格？

回答

相关问题