2014-12-12 10 views
5

düğme vurgulu özelliğinde metin rengini değiştirmek için:nasıl bootstrap ile yaptığım bir web sayfasında düğmeleri özelleştirmek için bu kılavuzu kullanılan

Change hover color on a button with Bootstrap customization

Sorun tutmak yönetemez olmasıdır Vurgulu olarak aynı font renginde ve neden hep koyu griye dönüştüğünü açıklayamıyorum. İşte 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].org&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*/ 
} 

Herhangi bir fikir?

+1

Burada sadece 'renk çift noktalı virgül işaret etmek istiyorum: # FFD180 ;;' – Mattigins

cevap

1

bu hattan geliyor daha spesifik hale !important önlemek için seçici gibi:

.btn.btn-özel

Kontrol Codepen

+0

Bu şekilde çalışır. –

3

CSS'nizin hover bölümünün color: #FFD180 numarasına !important; kodunu ekleyin.

.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*/ 
} 

Düzenleme: renk (# 333), muhtemelen bootstrap .btn sınıfı sizin codepen daha fazla ağırlık oluyor bazı yolu gibi, deneyebileceğiniz görünüyor bootstrap.min.css

.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad} 
İlgili konular