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 “paralla…

Manter Botão dentro da Imagem "parallax"

<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>

.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; }

1 Resposta

lype.formiga 10 de abr. de 2018

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:

Cadastre-se

CSS:

*{

margin: 0;

padding: 0;

}

.header-site{

background-image: url(<a href="https://png.pngtree.com/element_origin_min_pic/16/08/24/0957bcfe7623a91.jpg">https://png.pngtree.com/element_origin_min_pic/16/08/24/0957bcfe7623a91.jpg</a>);

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

1 Resposta

Topicos relacionados