Click event is not working in CSS - asp.net

Question

I am not able to get the click evet in CSS
My code is like this
<input name="btn" type="button" onclick="~/Default22.aspx" value="Home" class="classname" style="position:absolute; left: 286px; top: 160px; margin-bottom: 0px;"/>
and I have class="classname"
.classname
{
text-indent:1px;
display:inline-block;
color:#132354;
font-family:Arial;
font-size:17px;
font-weight:bold;
font-style:normal;
height:32px;
line-height:50px;
width:144px;
padding 0px 0px 0px 0px;
text-decoration:none;
text-align:center;
cursor: pointer;
opacity:.5;
}
.classname:hover
{
background:-webkit-gradient( linear, left top, left bottom,color-stop(0.05, #77d42a), color-stop(5, #5cb811) );
background:-moz-linear-gradient( center top, #ffffff 60%, #c0C0C0 90% );
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#77d42a',endColorstr='#5cb811');
background-color:#5cb811;
opacity:1;
}
.classname:active
{
position:relative;
top:1px;
}
The problem is when I click the button click event is not happening..not redirecting the page to Deafault22.aspx
I am working on Asp.net framework
Please help me

Answer 1

An HTML input element will not redirect to a web page in the onclick attribute, because it does not know how to redirect via that attribute.
Use a server control, like this:
Markup:
<asp:Button id="Button1" runat="server" Text="Home" OnClick="Button1_Click" />
Code-behind:
protected void Button1_Click(object sender, EventArgs e)
{
// Redirect here
Response.Redirect("Default22.aspx);
}
Use JavaScript/jQuery to handle the click event and redirect, like this:
$(document).ready(function() {
$('.classname').click(function() {
window.location = "Default22.aspx";
});
});

Answer 2

Try use onclick='window.open("Default22.aspx");' instead of onclick="~/Default22.aspx"
Inline Script:
onclick='window.location.href ="Default22.aspx";'
javascript function:
function Redirect(){
window.location.href ="Default22.aspx";
}
<input name="btn" type="button" onclick="Redirect();" value="Home" class="classname" style="position:absolute; left: 286px; top: 160px; margin-bottom: 0px;"/>
Jquery:
$(function() {
$('.classname').click(function() {
window.location.href = "Default22.aspx";
});
});

Answer 3

OnClick attribute of any HTML control is meant to be used for JavaScript. You have confused it with HREF attribute of <a></a> element
Here is what you need to do:
onclick="window.location.href ='Default2.aspx';return true;"

Answer 4

Firstly, 'the click event in CSS' - not sure what you're talking about. You can't handle click events in CSS.
Secondly, that's not how the <input type="button"> works. onClick - the client-side event - is expecting some Javascript, not a URL.
Try this: -
onclick="window.location = '/Default22.aspx';"
Note that the ~ (tilde) is an ASP.NET-specific thing and not relevant to IIS; don't use it in a regular URL.
Hope that helps.

Answer 5

Direct onclick="~/Default22.aspx" will not work here as this is a input type button, have to add client side events like..
onclick="window.location.href ='Default22.aspx';return true;" for opening in the same window.
or
onclick="window.open('Default22.aspx');", for opening the page in a tab.
Also you can created a javascript method and call that method inside the onClick and redirecting the page to Deafault22.aspx.