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/
