All geek questions in one place

How to change text color in cursor properties

I used this guide to customize the buttons on a web page that I made using bootstrap:

Change hover color with button with Bootstrap setting

The problem is that I can’t keep the same font color in hover mode, and I can’t explain why it always changes to dark gray. 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: sostegno@mlal.org " class="btn btn-custom btn-lg btn-block"> info@mail.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*/ }

Any ideas?

+5
source share
2 answers

It looks like the bootstrap .btn class gets more weight on your codefen, you can try to avoid !important by making your selector more specific, like this:

.btn.btn custom

Check out Codepen

+1
source

Just add !important; in 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: color (# 333) probably comes from this line in bootstrap.min.css

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

Source: https://habr.com/ru/post/1208893/

More articles:


All Articles