How to change text color in button hover property

html css twitter-bootstrap button hover

14,191

Solution 1

Seems like some way the .btn class of bootstrap is getting more weight on your codepen, you can try to avoid the !important making more specific your selector like:

.btn.btn-custom

Check the Codepen

Solution 2

Just add !important; to the color: #FFD180 in the hover part of your 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: The color (#333) probably comes from this line in the bootstrap.min.css

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

14,191

Filippo

Updated on September 30, 2022

Comments

Filippo over 1 year

I used this guide to customize buttons in a web page I've made with bootstrap:

Change hover color on a button with Bootstrap customization

The problem is that I can't manage to keep the same font-color in hover and I can't explain why it always changes to dark grey. Here's the code: 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*/
}

Any ideas?