Javascript – How to redirect to a page using a button tag in html

htmljavascript

When I Click a button I want to get redirected to a page. The problem is…if I use the normal sintax , the button works fine, but If I apply some css to id by ussing # and .(classes) ,the button it`s not working any more ?! How can I keep my css and functionality at the same time ?!
This is my code:

<body>

    <input id="buttonrain" class="classname" type="button" onClick="window.location.href='rain.html'" value="Rain" />

    <!--or <a href="rain.html" id="buttonrain" class="classname">Rain</a> still not working-->

</body>

CSS FILE

html {
min-width: 100%;
min-height: 100%;
}
body{
width: 1024px;
height:600px;
background:white;
margin:0px;
padding:0px 0px;
display:block;
overflow:hidden;
}

.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05,  #f0ea3c), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #f0ea3c 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0ea3c', endColorstr='#dfdfdf');
background-color:#f0ea3c;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#0f000f;
font-family:Verdana;
font-size:15px;
font-weight:bold;
padding:18px 9px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
position:relative;
bottom:250px;

}.classname:active {
position:relative;
top:1px;
}

#buttonrain{
left:80px;
}

Best Answer

Observe:

.classname {
position:relative;
bottom:250px;

}

.classname:active {
position:relative;
top:1px;
}

I have pulled this from the code you supplied. When I tested this, I noticed the button moved way out of the way when I clicked my mouse button down. This makes it as if I didn't click on the button. When I release my mouse the the HTML button returns, but it won't receive the onClick event. When I removed that crazy positioning change, it worked just fine. Try that.

Related Topic