I have a master page with four buttons that have a mouse hover CSS property. Each button's corresponding response page is defined on the same master page. Now, I want to change the button style when the user is on the corresponding page. How can this be achieved? The code in my master page is as follows:
<style type="text/css">
.side_btn_css {
width: 200px;
height: 85px;
font-size: 20px;
color: #fff;
line-height:20px;
text-align: center;
border-radius: 50%;
background-color:#b30000;
border-style: solid;
border-color: #ffffff #b30000;
border-width: 15px;
}
.side_btn_css:hover
{
width: 200px;
height: 85px;
font-size: 20px;
color: #fff;
line-height:20px;
text-align: center;
border-radius: 50%;
background-color:#0a4241;
border-style: solid;
border-color: #ffffff #008080;
border-width: 15px;
}
.side_btn_css_focus
{
width: 200px;
height: 85px;
font-size: 20px;
color: #fff;
line-height:20px;
text-align: center;
border-radius: 50%;
background-color:#3333ff;
border-style: solid;
border-color: #000000 ##3333ff;
border-width: 15px;
}
</style>
<div id="left_buttons" style="size: auto;">
<asp:Button ID="bt_home1" runat="server" CssClass="side_btn_css" text="Home1" Font-Size="Larger" onclick="bt_home1_Click"/> <p />
<asp:Button ID="bt_home2" runat="server" text="Home2" CssClass="side_btn_css" Font-Size="Larger" onclick="bt_home2_Click" />
<p />
<asp:Button ID="bt_home3" runat="server" CssClass="side_btn_css" text="Home3" Font-Size="Larger" onclick="bt_home3_Click"/> <p />
<asp:Button ID="bt_home4" runat="server" CssClass="side_btn_css" text="Home4" Font-Size="Larger" onclick="bt_home4_Click"/></div>
protected void bt_home1_Click(object sender, EventArgs e)
{
Response.Redirect("home1.aspx");
}
protected void bt_home2_Click(object sender, EventArgs e)
{
Response.Redirect("home2.aspx");
}