Como colocar o botão flutuante do WhatsApp no site

Como colocar o botão flutuante do WhatsApp no site

Neste tutorial vamos fazer um botão do WhatsApp no site bem simples com uma imagem png com link apontando para o aplicativo do WhatsApp com html e css.

Nesta seção, projetaremos uma estruturas basica no html. 

Usaremos A Tag <a>, para inserirmos o link de destino e usaremos a class”btn-whatsapp, animated, delay e tada” no css para posicionar o botão fixo na página html.

Vamos Adicionar o Html

<a href="#" title="Fale Conosco" class="btn-whatsapp animated delay tada"></a>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso botão do whatsapp.

    .btn-whatsapp {
        z-index:9; 
        position:fixed; 
        right:15px; 
        bottom:15px; 
        transform:translate(-50%, -50%);
        background:transparent;  
        background-image:url('../img/btn-whatsapp.png');
        background-position:center center;
        background-repeat:no-repeat;
        width:75px; 
        height:75px;
        cursor:pointer; 
        border-radius:100%;
    }

    .btn-whatsapp:hover {
        opacity:0.9;
        transition:0.3s;
    }

	.animated {
	  -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	}

	.delay {
	  -moz-animation-delay: 0.8s;
	  -webkit-animation-delay: 0.8s;
	  animation-delay: 0.8s;
	}

	@-webkit-keyframes tada {
	  0% {
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	  }

	  10%, 20% {
	    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	  }

	  30%, 50%, 70%, 90% {
	    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	  }

	  40%, 60%, 80% {
	    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	  }

	  100% {
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	  }
	}

	@keyframes tada {
	  0% {
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	  }

	  10%, 20% {
	    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	  }

	  30%, 50%, 70%, 90% {
	    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	  }

	  40%, 60%, 80% {
	    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	  }

	  100% {
	    -webkit-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	  }
	}

	.tada {
	  -webkit-animation-name: tada;
	  animation-name: tada;
	}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Veja como Ficou o Botão do Whatsapp no Site!

Baixar Código Veja Funcionando