<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input:button").addClass("Class1");
$("input:button").mouseover(function () {
if ($(this).hasClass("Class1"))
$(this).removeClass("Class1");
$(this).addClass("Class2");
});
$("input:button").mouseout(function () {
if ($(this).hasClass("Class2"))
$(this).removeClass("Class2");
$(this).addClass("Class1");
});
});
</script>
<style type="text/css">
.Class1 {
background-color:red;
color:white;
font-family:Tahoma;
font-size:30px;
border:5px solid green;
box-shadow:gray 6px 6px;
border-radius:10px;
cursor:pointer;
}
.Class2 {
background-color:red;
color:white;
font-family:'Monotype Corsiva';
font-size:30px;
border-radius:10px;
border:5px solid yellow;
box-shadow:red 6px 6px;
cursor:pointer;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<div align="center">
<input type="button" value="Button1" />
<input type="button" value="Button2" />
<input type="button" value="Button3" />
<input type="button" value="Button4" />
</div>
</form>
</body>
</html>
Output:
No comments:
Post a Comment