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

Answer 1

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