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;
}
