How do I change the color of the button while hovering?

Question

 #btnNext {
        border: 0px solid #FFF ;
        box-shadow: none ;
        filter: brightness(0) invert(1) ;
        height: 20px ;
        opacity: .3 ;
        padding: 0px ;
        visibility: visible ;
        position: none ;
        bottom: 0px ;
        right: 15px ;
        z-index: 999 ;
    } 
    #btnPrevious {
        border: 0px solid #FFF ;
        box-shadow: none ;
        filter: brightness(0) invert(1) ;
        height: 20px ;
        opacity: .3 ;
        padding: 5px ;
        visibility: visible ;
        position: none ;
        bottom: 30px ;
        left: 30px ;
        z-index: 999 ;
    }
   #btnPrevious:hover,
   #btnNext:hover{ 
        opacity: 1 ;
        transition: all .3s ease-in-out ;
       
    }

This the code I've come up with I'm proud of the opacity change and all but I want the color to change along with the opacity while hovering. I hope you get what I mean but that's what I want to happen. I have tried adding background-color: and color: under the hover tab but they don't seem to work I think I have to remove the filter but I'm not sure so please help me with this I request.

something must be wrong if you are using so many `!important`s in your code — dippas, May 29 '17 at 13:07
`!important` is almost always the wrong solution to a problem of specificity in your CSS. I'd recommend reading about specificity, and how to understand it: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ — David Thomas, May 29 '17 at 13:09
If you want BOTH the color AND opacity of the background to change, I'd recommend looking into using "rgba" colors. Furthermore, like others have stated, why do you have soo many !important's? They can be nice but it's not right when you got it on every property. — Xariez, May 29 '17 at 13:13
Xariez i just want the color of the foreground to change not the background however if i add the rgba color after removing the filter using background-color the background color does change i just want a to know how to change the color from a low opacity gray to a bright green rgba(119, 221, 85, 1); — BlazinBytes, May 29 '17 at 13:45
Actually this is a theme i'm making for website if that is of any help — BlazinBytes, May 29 '17 at 13:53
Possible duplicate of [How can I change a button's color on hover?](https://stackoverflow.com/questions/3898781/how-can-i-change-a-buttons-color-on-hover) — Nick M, May 29 '17 at 15:30

score 0 · Answer 1 · answered May 29 '17 at 13:11

Try this :

            <style>
             #btnNext {
                    border: 0px solid #FFF ;
                    box-shadow: none ;
                    height: 20px ;
                    opacity: .3 ;
                    padding: 0px ;
                    visibility: visible ;
                    position: none ;
                    bottom: 0px ;
                    right: 15px ;
                    z-index: 999 ;
                } 
                #btnPrevious {
                    border: 0px solid #FFF ;
                    box-shadow: none ;
                    filter: brightness(0) invert(1) ;
                    height: 20px ;
                    opacity: .3 ;
                    padding: 5px ;
                    visibility: visible ;
                    position: none ;
                    bottom: 30px ;
                    left: 30px ;
                    z-index: 999 ;
                }
               #btnPrevious:hover,
               #btnNext:hover{ 
                    opacity: 1 ;
                    transition: all .3s ease-in-out ;

                } 
                </style>
            <body>

            <button id="btnNext">Hello</button>

            </body>

score 0 · Answer 2 · answered May 29 '17 at 13:18

0

Your filter property filter: brightness(0) invert(1) !important; prevent to add background-color on hover. Just remove it and add background-color: red; property.

Here my jsfiddle --> https://jsfiddle.net/vwmgnv8e/

Hope it's helps :)

answered May 29 '17 at 13:18

Rémy Testa

897
1
11
24

is there a possible way to include the color in the filter because that doesn't seem to be working – BlazinBytes May 29 '17 at 13:40

score -2 · Answer 3 · answered May 29 '17 at 13:50

-2

hello you can do that with jquery like this:

$("the name of the class").hover(function() {

$(this).css("background-color","red") });

answered May 29 '17 at 13:50

erevos13

351
3
12

im fairly new to coding so could you emphasize a bit more – BlazinBytes May 29 '17 at 13:57

How do I change the color of the button while hovering?

3 Answers3