botão retrátil na lateral do site

[Claudio Demarchi 0]

Olá! Sou novo nessa área de CSS e gostaria de fazer os dois tipos de botões laterais como no site http://www.imobibrasil.com.br/. Um somente com alguma informação e outro com um link qualquer. Alguém poderia me explicar como faço isso em CSS?

Antecipadamente agradeço.

[jonathanrn 2]

Olá, um bom ponto de partida para aprender considerando que você já saiba o básico de html e css seria animações e transições com css3.

 

animações: http://www.w3schools.com/css/css3_animations.asp

transições: http://www.w3schools.com/css/css3_transitions.asp

 

Aqui está uma exemplo usando animação em css3(versão porca, feita de última hora): https://jsfiddle.net/wo0xvuen/

[L. Henrique 179]

Claudio Demarchi,

Como o Jonathanrn citou, você já deve saber HTML e CSS (básicos) para entender o que vamos propor de solução... Então vamos ao que interessa.

Você pode simular essa estrutura de diversas maneiras no HTML, exemplos:

1

<div class="wrapper">
   <a href="#"><div class="info"></div></a>
   <a href="#"><div class="whatsapp"></div></a>
</div>

2

<ul class="menu-lateral">
   <li><a href="#">Info</a></li>
   <li><a href="#">Whatsapp</a></li>
</ul>

3

<div class="wrapper">
   <a href="#">Info</a>
   <a href="#">Whatsapp</a>
</div>

Bom... Tudo isso mostrado acima é bem simples e o que vai faltar será só o CSS3 a ser utilizado pra deixar alinhado a esquerda da página e fixo conforme o scroll (rolagem).

Veja um exemplo que preparei pra você no JSFiddle. Lembrando que todo elemento que você criar, ele automaticamente estará alinhado a esquerda da página. O efeito é bem simples, eu só negativei a margem pra que ele ficasse fora de visão e na pseudo-classe :hover, foi removido a margem negativada.

Adicionei o transition com cubic-bezier como efeito, mas você pode substituir por outros, exemplo: ease, ease-in, ease-in-out, ease-out...

 

 

Aqui está uma exemplo usando animação em css3(versão porca, feita de última hora): https://jsfiddle.net/wo0xvuen/

Jonathanrn, evite o uso de animation para efeitos simples (consome mais código, é mais lento e pode dar problemas ao efetuar o efeito "out") e também evite margin-top para alinhamento (isso dará dores de cabeça mais pra frente). Quando você atribui um position: fixed; você pode utilizar o top: 50%; para que o menu fique ao centro da página.

[jonathanrn 2]

Jonathanrn, evite o uso de animation para efeitos simples (consome mais código, é mais lento e pode dar problemas ao efetuar o efeito "out") e também evite margin-top para alinhamento (isso dará dores de cabeça mais pra frente). Quando você atribui um position: fixed; você pode utilizar o top: 50%; para que o menu fique ao centro da página.

Muito bom!

Verdade, acabei percebendo que não utilizo muito transition o que faz meu projeto ficar maior em certos casos. Vou me atentar, obrigado pela ajuda!