Brincando com Botões float

 Bom dia a todos, acho que estou usando esse blog mais como desabafo de precisar falar para alguém oque estou fazendo e não quero incomodar ninguém com isso.

Como o blog é de graça vamos la, hoje vou trazer mais um exemplo do que fiz no meu site, no caso são botões de contato e vou deixar como eles aparecem no meu site, qual css usado e como implementar o botão.

Bom vou começar sobre esses botões pois a estilização foi eu que fiz, depois eu falo sobre a utilização do jivosite que se localiza do outro lado da imagem.

Vamos la, em primeiro lugar, eu criei os botões no meu index, no meu caso é um index.pug que o node vai transformar em html depois, ficando assim a criação dos botões.

div.button-wrapper

            a.float.whatsapp(href="https://wa.me/5512988844068", target="blank")

                i.fab.fa-whatsapp.my-float

            a.float.instagram(href="https://instagram.com/champiao_cloud_solutions/", target="blank")

                i.fab.fa-instagram.my-float

            a.float.facebook(href="https://facebook.com/champiaocloudsolutions/", target="blank")

                i.fab.fa-facebook.my-float

            a.float.linkedin(href="https://linkedin.com/in/champiao", target="blank")

                i.fab.fa-linkedin.my-float

Como eu estou mexendo em um arquivo pug pode ser um pouco diferente mas seria bem próximo

a esse código onde criamos uma div para fazer a divisão que queremos tipo um container

para mexer ele pela tela sem desalinhar nenhum outro componente na proximidade.

Após a criação dos botões eles ainda não ficaram do jeito que mostrei na foto, para isso

precisamos estilizar esses botões com CSS

.button-wrapper {

    position: fixed;

    bottom: 40px;

    right: 40px;

    z-index: 100;

  }

 

  .button-wrapper .float {

    width: 60px;

    height: 60px;

    margin-bottom: 15px;

    background-color: #25d366;

    color: #fff;

    border-radius: 50%;

    text-align: center;

    box-shadow: 2px 2px 3px #999;

    display: flex;

    justify-content: center;

    align-items: center;

  }

 

  .button-wrapper .float i {

    font-size: 24px;

    margin-top: 5px;

  }

 

  .button-wrapper .float.whatsapp {

    background-color: #25d366;

  }

 

  .button-wrapper .float.facebook {

    background-color: #3b5998;

  }

 

  .button-wrapper .float.instagram {

    background-color: #e4405f;

  }

 

  .button-wrapper .float.linkedin {

    background-color: #0077b5;

  }

 

  .button-wrapper .float.twitter {

    background-color: #1da1f2;

  }

Agora sim ele esta float responsivo e com as cores correspondentes a da imagem mostrada.

Como foi para exemplo e ja utilizo isso no meu site como meu contato, o código contem as

minhas informações de contatos reais, onde se estiver apenas testando pode ver se esta

realmente funcionando.