Css buttons: Zooming is placing them wrong

I have a site, on the index page I have 5 buttons around a picture. Without zoom everything looks like I want but when I zoom they get misplaced directly. I ried to use relative units instead of absolute ones but then it got worse.

My code:

    .myButton4 {
 position:absolute;
    transition: .5s ease;
     top: 25%;
    left: 63%;
    background-color:#B28F00;
    -moz-border-radius:36px;
    -webkit-border-radius:36px;
    border-radius:36px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Times New Roman;
    font-size:19px;
    font-weight:bold;
    padding:16px 34px;
    text-decoration:none;
    text-shadow:0px 0px 0px #82797f;
    }
    .myButton4:hover {
        background-color:#B28F00;
    }
    .myButton4:active {
        position:relative;
        top:1px;

Maybee someone can help me?