Manter Botão dentro da Imagem "parallax"

Estou começando a descobrir mais sobre o front end e estou com uma duvida bem boba mas que já me fez perder muito tempo tentando achar.
Estou programando no sublimetext 3 usando o bootstrap3 para fazer o efeito “parallax”.
Algo parecido com isso: https://logogeek.uk/
porem não consigo de jeito nenhum deixar meu botão “cadastre-se” no meio da tela junto com a imagem de fundo. Alguém sabe me dizer o que estou fazendo de errado por favor? D:

HTML:

Mountain Trade
<section class="header-site">

    <div class="container">

      <div class="row">

        <div class="col-xs-12">

          <div class="botao">

            <p class="text-center">              
              <a href="#" class="btn btn-danger">Cadastre-se</a>
            </p>

          </div>

        </div>

     </div>

   </div>

CSS:

.header-site{
background-image: url(…/img/ceu2.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color:#ffffff;
padding-top: 400px;
padding-bottom: 400px;
}

.botao{
position: center;

}

CSS bootstrap:

.btn-danger {
color: #fff;
background-color: #2cc990;
border-color: #2cc990;

}
.btn-danger:focus,
.btn-danger.focus {
color: #fff;
background-color: #ffbd4a;
border-color: #ffbd4a;

}
.btn-danger:hover {
color: #fff;
background-color: #ffbd4a;
border-color: #ffbd4a;
}

Olá, veja se o exemplo abaixo ajuda na sua dúvida?

Alterei um pouco a estrutura do HTML. Porém, não influencia em nada.

Segue o exemplo funcionando: https://codepen.io/filype-ferreira/pen/WzPgjz

HTML:

CSS:
*{
margin: 0;
padding: 0;
}

.header-site{
background-image: url(https://png.pngtree.com/element_origin_min_pic/16/08/24/0957bcfe7623a91.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color:#ffffff;
padding-top: 400px;
padding-bottom: 400px;
position: relative;
}

.botao{
position: absolute; // aqui fazemos o seu botão flutuar dentro da div pai.
top: 50%; //posicionamos 50% do topo.
left: 50%; //posicionamos 50% da esquerda.
transform: translate(-50%, -50%); //fazemos um reset considerando o tamanho do elemento, para ele se manter ao centro do pai.
}

.btn-danger {
color: #fff;
background-color: #2cc990;
border-color: #2cc990;
display:block;
padding: 10px 15px; // adicionei um espaçamento interno no seu botão

}
.btn-danger:focus,
.btn-danger.focus {
color: #fff;
background-color: #ffbd4a;
border-color: #ffbd4a;

}
.btn-danger:hover {
color: #fff;
background-color: #ffbd4a;
border-color: #ffbd4a;
}

abraçoTexto pré-formatado