我正在尝试使用渐变样式的按钮,但是,我有一个悬停样式的问题,这是悬停前的按钮:
这是在鼠标悬停之后:
这是一大堆按钮:
= 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-20 04:00:21
Twitter Bootstrap将background-position
悬停在带有过渡的动画中(因为背景梯度不能有过渡)。在你的例子中,背景渐变是用background-position: -15px
向上移动的,而你看到的是下面的背景颜色。
要解决此问题,请在悬停时将background-color
设置为按钮渐变的底部颜色:
.tour_btn {
#gradient > .vertical(#F98C51, #a35b35);
&:hover { background-color: #a35b35 }
}
发布于 2013-03-29 16:19:32
如果您为按钮设置了背景图像,则悬停时背景将按15px
向上移动。您可以将其设置为0px
。
.tour_btn:hover {
background-position: 0px !important;
}
发布于 2013-03-29 18:33:27
当使用自定义css而不是更少的样式来设置按钮样式时,可以尝试http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874E。您将获得自定义按钮的所有css,包括悬停效果和禁用/活动状态。
对于上面的按钮,可以使用possible:
.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 /after你的bootstrap(.min).css使用这个css让你的自定义按钮效果在大多数浏览器中工作。
https://stackoverflow.com/questions/12501224
复制相似问题