Кнопки позиционирования для переходов

Я начал веб-сайт и делал переход к переходу между страницами, у меня проблема с позиционированием кнопок, которые запускают переход. есть 6 кнопок, (2 для каждой страницы), я помещаю png img в тег. Вот html-код для кнопок

<div class="pt-page pt-page-3">
    <div class="pt-trigger-container">
        <button class="pt-trigger button1" data-animation="1" data-goto="3"></button>
    <button class="pt-trigger button2" data-animation="2" data-goto="2"></button>   
    </div>
</div>

и вот код css:

.pt-trigger-container {
    position: absolute;
    width: 100px;
    z-index: 999999;
    left: 50%;
    margin-top: 75px;
    margin-bottom: 75px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}




.pt-trigger {
    border: none;
    font-size: 16px;
    font-weight: 20; 
    margin: 20px 0 20px;
    padding: 0 50px;
    height: 80px;
    letter-spacing: 1px;
    width: 100%;
    cursor: pointer;
    font-family: 'Orator std';
    box-shadow: 0 3px 0 #181917;
}

.button1 {
    position: relative;
    top:50px;   
    bottom:100px;
    left:0120px;
    right:0px;
}

.button2 {
    position: relative;
    top:50px;
    bottom:200px;
    left:100px;
    right:300px;
}