2014-12-12 14 views
5

użyłem tego przewodnika, aby dostosować przyciski na stronie internetowej zrobiłem z bootstrap:Jak zmienić kolor tekstu w przycisku własności najechania

Change hover color on a button with Bootstrap customization

Problem polega na tym, że nie uda się utrzymać ten sam kolor czcionki w dymku i nie potrafię wyjaśnić, dlaczego zawsze zmienia się na ciemnoszary. Oto kod: http://codepen.io/anon/pen/ByKZZK

HTML:

<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
</head> 

<button href="mailto:[email protected]" class="btn btn-custom btn-lg btn-block">[email protected]&nbsp; <span class="glyphicon glyphicon-envelope"></span></button> 

CSS:

.btn-custom { 
    color: #FFD180;; 
    background-color: #483737; 
    border-color: #357ebd; /*set the color you want here*/ 
} 
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom { 
    color: #FFD180; 
    background-color: #837171; 
    border-color: #837171; /*set the color you want here*/ 
} 

Jakieś pomysły?

+1

Chcę tylko zwrócić uwagę na podwójne średnik tutaj 'color: # FFD180 ;;' – Mattigins

Odpowiedz

1

Wygląda na to jakiś sposób klasa .btn z bootstrap jest coraz większą wagę na codepen, można spróbować aby uniknąć !important podejmowania bardziej specyficzne Twój selektor jak:

.btn.btn-niestandardowego

Sprawdź Codepen

+0

ten sposób działa. –

3

Po prostu dodaj !important; do części color: #FFD180 w części CSS.

.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom { 
    color: #FFD180 !important; 
    background-color: #837171; 
    border-color: #837171; /*set the color you want here*/ 
} 

Edit: Kolor (# 333) prawdopodobnie pochodzi z tej linii w bootstrap.min.css

.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad} 
Powiązane problemy