Pixel art not staying in correct place in HTML

Question

https://new.fiftyy.repl.co/

When the button is clicked, it changes animation (pressed down) however, the pixel art image is centered and should behave like this instead: https://scratch.mit.edu/projects/868967622/

The button changes from the top. However HTML does from the center. How do I solve this?

Sry if the question isn't clear. Thx in advance.

Answer 1

You can position your item basing on the bottom of the screen instead of top of it. So change your code from

#mainBtn {
    width: 115px;
    height: auto;
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%,-50%);
}

To

#mainBtn {
    width: 115px;
    height: auto;
    position: absolute;
    bottom: 5%; /*---- Change here ----*/
    left: 50%;
    transform: translate(-50%,-50%);
}

Answer 2

#mainBtn {
    width: 115px;
    height: auto;
    position: absolute;
    bottom: 5%; /*---- Change here ----*/
    left: 50%;
    transform: translate(-50%, 5%);
}

You need to change the translate as you did mainbtn bottom.

Could you +1 if it worked for you?