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>
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
Post a Comment