CODEWITHSUNDEEP
htmlcss
EH11353
EH11353

Reputation: 49

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

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

Upvotes: 4

Views: 1264

Answers (3)

user13146129
user13146129

Reputation:

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

Upvotes: 1

Ofir Lana
Ofir Lana

Reputation: 393

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

Upvotes: 3

Subrato Pattanaik
Subrato Pattanaik

Reputation: 6049

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

Upvotes: 4

Related Questions