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引導，按鈕盤旋風格？

回答

相關問題