html - Why is my button not being the color I'm telling it to be? -


i'm trying make button 1) red, , 2) become green upon hover/mouse over. here's html:

 <div id="home-button"> <button type="button" style="height: 100px; width: 400px; font-size: 45px; font-family: 'josefin sans', sans-serif; border-radius:20px" href='/'> home </button> </div>

home

here's css:

#home-button {   text-align: center;   padding:10px;   color: red; }  #home-button:hover {     background-color: green; } 

as can see, button neither red nor green. please tell me why

target button itself

#home-button button{    text-align: center;    padding:10px;    color: red;  }    #home-button:hover button{      background-color: green;  }
<div id="home-button"> <button type="button" style="height: 100px; width: 400px; font-size: 45px; font-family: 'josefin sans', sans-serif; border-radius:20px" href='/'> home </button> </div>


Comments

Popular posts from this blog

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -

YouTubePlayerFragment cannot be cast to android.support.v4.app.Fragment -