BerGEX BerGEX - 2 months ago 6
HTML Question

ASP.net CSS error on button hover

I have this button

<button type="submit" id="wow">
<i class="fa fa-lock"></i> Log In
</button>


I am trying to enter a Font Awesome Icon at the login button.
the CSS code is this:

#wow{
padding-top:10px;
background-color:red;
border:none;
float: left;

color:#333333;
width: 120px;
height:120px;
}


and for :hover just this

#wow :hover {
background-color: green;

}


This is the button in normal state.
image1

this is the button hover.
image2

it changes the background only of the icon...

any suggestion to fix this?

Answer

You need to remove the space between #wow and :hover. Currently your hover will be applied to the buttons descendants

#wow {
  padding-top: 10px;
  background-color: red;
  border: none;
  float: left;
  color: #333333;
  width: 120px;
  height: 120px;
}
#wow:hover {
  background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<button type="submit" id="wow">
  <i class="fa fa-lock"></i> Log In
</button>