CSS button not changing colour during hover (css and html)

Question

For some reason my code is not allowing me to change the background colour of my button when I hover over it.

.button {
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    text-align:center;
    transition: all 0.2s;
    background-color:#f14e4e
}

.button.new-quote:hover {
    background-color: black !important;
}

<input type="button" class="new-quote button" value= 'test'/>

Thank you for any help. I've tried making the selector a button, I've tried using the CSS on other parts of the code no luck. I'm using the Brackets editor

It's likely your CSS is overwritten somewhere; even if you have the `!important` tag. Are you sure you're not redefining `.button.new-quote:hover` anywhere? — marsnebulasoup, Jan 24 '21 at 02:26
@EH11353 Check my answer I found the problem why it was not working in the first place. There is nothing wrong with your selector. — Subrato Pattanaik, Jan 24 '21 at 05:03

Ofir Lana · Answer 1 · 2021-01-24T05:41:19.400

3

Your code works fine.

There are invisible characters hiding right before background-color.

So instead of being parsed as background-color, it's probably being parsed as something like:
%20%20%20background-color or something weird like that

.button {
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    text-align:center;
    transition: all 0.2s;
    background-color:#f14e4e;
}


.button.new-quote:hover{
  background-color:black;
  font-size:19px;
}

   <input type="button" class="new-quote button" value='test'/>

edited Jan 24 '21 at 05:41

answered Jan 24 '21 at 01:31

Ofir Lana

383
5
13

Why `background` and not `background-color` ? – s.kuznetsov Jan 24 '21 at 01:32
It will work with both,i`ll edit the answer soon with explantion – Ofir Lana Jan 24 '21 at 01:34
https://stackoverflow.com/questions/10205464/what-is-the-difference-between-background-and-background-color @s.kuznetsov – Ofir Lana Jan 24 '21 at 01:54
Yes, but agree, when the default is `background-color`, and in the hover is `background`, it looks a little ridiculous. Also, it can be confusing when you have huge code with a huge number of pseudo-classes. – s.kuznetsov Jan 24 '21 at 01:57
Thank you! This seems to have done the trick! – EH11353 Jan 24 '21 at 04:31

score 3 · Answer 2 · answered Jan 24 '21 at 04:49

There is nothing wrong with your selector. You have correctly selected the button hover. I have run your code and guess what it is working fine.

I found the problem why did your code didn't work.

.button.new-quote:hover {
    background-color: black !important;
}

This is your selector and now checks my selector

.button.new-quote:hover {
  background-color: black !important;
}

Can you see a little difference here? That is extra whitespaces behind background-color property. I have removed all the spaces first and then added two spaces and then it worked as we all are expected.

In my opinion, I think you have copied the background-color property from somewhere else which has a copy policy to add hidden character spaces.

.button {
  display: inline-block;
  padding: 0.3em 1.2em;
  margin: 0 0.1em 0.1em 0;
  border: 0.16em solid rgba(255, 255, 255, 0);
  border-radius: 2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
  text-align: center;
  transition: all 0.2s;
  background-color: #f14e4e
}

.button.new-quote:hover {
  background-color: black !important;
}

<input type="button" class="new-quote button" value='test' />

I am not sure about the reason but found the problem though. — Subrato Pattanaik, Jan 24 '21 at 04:51
Correct, good job on finding that out, spent too much time to found that ... — Ofir Lana, Jan 24 '21 at 05:37
I have applied prettier to that code then I came to know that there is something wrong with the format of the code. — Subrato Pattanaik, Jan 24 '21 at 05:43
Thank you! That does seem to be the problem, but why didn't the linter find it like it usually does in my Javascript? Does it not work on CSS code then? — EH11353, Jan 25 '21 at 05:30
ESLint is for javascript. There are few linters for CSS like scsslint or older CSSLint. Nowadays most CSS developers use `PostCSS`. — Subrato Pattanaik, Jan 25 '21 at 05:52

score 0 · Answer 3 · answered Jan 24 '21 at 06:31

This might help you

.button {
  display:inline-block;
  padding:0.3em 1.2em;
  margin:0 0.1em 0.1em 0;
  border:0.16em solid rgba(255,255,255,0);
  border-radius:2em;
  box-sizing: border-box;
  text-decoration:none;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  color:#FFFFFF;
  text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
  text-align:center;
  transition: all 0.2s;
  background-color:#f14e4e;
}


.button:hover{
  background-color:black !important;
}

<input type="button" class="new-quote button" value= 'test'/>

CSS button not changing colour during hover (css and html)

3 Answers3