2014-12-12 33 views
5

tôi đã sử dụng hướng dẫn này để tùy chỉnh các nút trong một trang web tôi đã thực hiện với bootstrap:Làm thế nào để thay đổi màu sắc văn bản trong nút tài sản di chuột

Change hover color on a button with Bootstrap customization

Vấn đề là tôi không thể quản lý để giữ cùng màu phông chữ trong di chuột và tôi không thể giải thích tại sao nó luôn thay đổi thành màu xám đậm. Dưới đây là các mã: 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*/ 
} 

Bất kỳ ý tưởng?

+1

Tôi chỉ muốn chỉ ra những đôi dấu chấm phẩy ở đây 'color: # FFD180 ;;' – Mattigins

Trả lời

1

Dường như một số cách lớp .btn của bootstrap là nhận được trọng lượng thêm về codepen của bạn, bạn có thể thử để tránh !important làm cụ thể hơn chọn của bạn như:

.btn.btn tùy chỉnh

Kiểm tra Codepen

+0

Bằng cách này hoạt động. –

3

Chỉ cần thêm !important; vào color: #FFD180 trong phần hover một phần của CSS của bạn.

.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: Các màu (# 333) có lẽ xuất phát từ dòng này trong bootstrap.min.css

.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad} 
Các vấn đề liên quan