Change button color on hover

Change button color on hover

To change button color on hover please use below code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
     ul {
      list-style: none;  
        margin: 40px 0;
    }
    li {
        float : left;
    }
    /*This will style the buttons*/
    .buttonStyle {
        width:80px;
        height:40px;
        border:none;
        padding:0px 7px 3px 7px;
        margin:5px;
        font-size:14px;
        text-align:left;
        font-weight:bold;
        line-height:14px;
        font-family:Arial, Helvetica, sans-serif;
        background-color:#ffcc00;
       
        }
    /*On hover color chagne*/
    .buttonStyle:hover {
         background: grey;
    }


</style>
<title>Toggle button color change</title>
</head>
<body>
    <ul >
        <li><input type="button" value="Button 1" class="buttonStyle" /></li>
        <li><input type="button" value="Button 2" class="buttonStyle"/></li>
        <li><input type="button" value="Button 3" class="buttonStyle"/></li>       
    </ul>
</body>
</html>

 

Test it here: jsfiddle.net/javahonk/R6EYp/

Leave a Reply

Your email address will not be published. Required fields are marked *