I'm currently working on a project where I need to animate a green bar moving upward over a blue bar when a button is clicked. However, no matter what I try, the button doesn't seem to be working. I've experimented with using both the button and input tags for the button element, but nothing seems to make a difference. Here's an excerpt of my code:
body {
margin: 0;
padding: 0;
text-align: center;
}
#container{
z-index: -1;
position: relative;
background-color: brown;
height: 800px;
width: 800px;
margin: 0 auto;
margin-top: 75px;
}
#fullLoad{
z-index: 1;
position: relative;
height: 600px;
width: 200px;
background: blue;
left: 300px;
top: 100px;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
}
#loader{
border-radius: 20px 20px 20px 20px;
z-index: 2;
position: absolute;
height: 600px;
width: 200px;
background: green;
top: 600px;
}
#btn{
position: absolute;
top: 20px;
right: 362px;
padding: 5px 20px;
border-radius: 5px;
background: gold;
font-family: sans-serif;
font-size: 1.8em;
color: #424242;
}<div id="container">
<div id="fullLoad">
<div id="loader"></div>
</div>
<input id="btn" type="button" value="Go !" onclick="alert('Hello')">
</div>