ボタンにグラデーションスタイルを使用しようとしていますが、ホバースタイルに問題があります。ホバー前のボタンは次のとおりです。
そして、これがホバー後です:
ここにボタンのハムルがあります:
= 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);
}
何かアイデアはありますか?ホバー状態に別のグラデーションスタイルを指定することはできますか?または、少なくとも、ホバーしたときにボタンを変更しないようにしますか?
Twitter Bootstrapアニメーションbackground-position
トランジションを伴うホバー(背景のグラデーションにはトランジションがないため)。あなたのケースで何が起こっているのですか、背景のグラデーションがbackground-position: -15px
、下に背景色が表示されています。
これを修正するには、background-color
ホバー時のボタングラデーションの下部の色に:
.tour_btn {
#gradient > .vertical(#F98C51, #a35b35);
&:hover { background-color: #a35b35 }
}
ボタンの背景画像を設定している場合、ホバーすると背景が15px
だけ上に移動します。 0px
に設定できます。
.tour_btn:hover {
background-position: 0px !important;
}
LESSの代わりにカスタムCSSを使用してボタンのスタイルを設定する場合は、 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を使用して、ほとんどのブラウザーでカスタムボタン効果を機能させます。
ボタンがcss:hoverプロパティでホバーされたときのCSSを指定できます。
したがって、あなたの場合、あなたは次のようなことをしたいでしょう
.tour_btn:hover {
/* your custom css */
}
chrome開発者ツールを使用すると、bootstrapによって現在適用されているグラデーションの種類を確認して、CSSでオーバーライドできます。
.tour_btn:hover {
background-color: #a35b35;
background-position: 30px 30px;
}
私はあなたがこれを試すことができるこの解決策を見つけました。シンプルなコードで動作します