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
– marsnebulasoup, Commented Jan 24, 2021 at 2: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
– Subrato Pattanaik, Commented Jan 24, 2021 at 5:03

Subrato Pattanaik · Accepted Answer · 2021-01-24 04:49:02Z

4

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' />

answered Jan 24, 2021 at 4:49

Subrato Pattanaik

6,1398 gold badges28 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Subrato Pattanaik Over a year ago

I am not sure about the reason but found the problem though.

Ofir Lana Over a year ago

Correct, good job on finding that out, spent too much time to found that ...

Subrato Pattanaik Over a year ago

I have applied prettier to that code then I came to know that there is something wrong with the format of the code.

EH11353 Over a year ago

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?

Subrato Pattanaik Over a year ago

ESLint is for javascript. There are few linters for CSS like scsslint or older CSSLint. Nowadays most CSS developers use PostCSS.

Ofir Lana · Accepted Answer · 2021-01-24 05:41:19Z

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, 2021 at 5:41

answered Jan 24, 2021 at 1:31

Ofir Lana

3935 silver badges13 bronze badges

5 Comments

s.kuznetsov Over a year ago

Why background and not background-color ?

Ofir Lana Over a year ago

It will work with both,i`ll edit the answer soon with explantion

Ofir Lana Over a year ago

stackoverflow.com/questions/10205464/… @s.kuznetsov

s.kuznetsov Over a year ago

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.

EH11353 Over a year ago

Thank you! This seems to have done the trick!

user13146129 · Accepted Answer · 2021-01-24 06:31:02Z

1

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'/>

answered Jan 24, 2021 at 6:31

user13146129

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related