YzwEmNQ

index.html

<a href="whatsapp://send?phone=523222102951&text=%F0%9F%99%8B%20%20Hola,%20%C2%BFEn%20qu%C3%A9%20podemos%20ayudarte?" target="_blank"class="float"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" ><i class="fab fa-whatsapp fa-7x" style="font-size:4em;"></i></a>
<div class="label-container success"><div class="label-text">Contáctenos por WhatsApp</div><i class="fa fa-play label-arrow"></i></div>



<a href="m.me/106629744418674" target="_blank"class="float2"><link rel="stylesheet" ><i class="fab fa-facebook-messenger fa-7x" style="font-size:4em;"></i></a>
<div class="label-container2" id="hideMe"><div class="label-text2">Contáctenos por Messenger</div><i class="fa fa-play label-arrow2" ></i></div>

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

*{margin:0 auto; }
body{font-size:18px;}

/*---------------------------
  WhatsApp Button
---------------------------*/

.fa-whatsapp {
color: #fff;
background: linear-gradient(#25d366,#25d366)10px 84%/10px 9px no-repeat,
radial-gradient(circle at center, #25d366 63%,transparent 0);
opacity:0.8;
}

.label-container {
position: fixed;
bottom: 25px;
right: 80px;
display: table;
visibility: visible;
}

.label-text {
color: #fff;
background: rgba(51,209,107,0.8);
display: table-cell;
vertical-align: middle;
padding: 10px;
border-radius: 0px;
}

.label-arrow {
display: table-cell;
vertical-align: bottom;
padding-top: 13px;
left: 0px;
color: #25d366;
opacity: 0.8;
border-radius: 0px;
}

.float {
position: fixed;
width: 64px;
height: 64px;
bottom: 40px;
right: 40px;
color: #FFF;
border-radius: 50px;
text-align: center;

}

.my-float {
font-size: 24px;
margin-top: 18px;
}

a.float + div.label-container {
visibility: hidden;
opacity: 0;
transition: visibility 3s, opacity 0.5s ease;
}

a.float:hover + div.label-container {
visibility: visible;
opacity: 1;
}




/*---------------------------
  Facebook Messenger Button
---------------------------*/
.fa-facebook-messenger {
color: #238af7;
background: linear-gradient(#ffffff,#ffffff)10px 54%/10px 9px no-repeat,
radial-gradient(circle at center, #ffffff 40%,transparent 0);
opacity:0.8;
}

.label-container2 {
position: fixed;
bottom: 100px;
right: 80px;
display: table;
visibility: visible;
}

.label-text2 {
color: #fff;
background: rgba(35,138,247,0.8);
display: table-cell;
vertical-align: middle;
padding: 10px;
border-radius: 0px;
}

.label-arrow2 {
display: table-cell;
vertical-align: bottom;
padding-top: 13px;
left: 0px;
color: #238af7;
opacity: 0.8;
border-radius: 0px;
}



.float2 {
position: fixed;
width: 64px;
height: 64px;
bottom: 110px;
right: 40px;
color: #FFF;
border-radius: 50px;
text-align: center;

}

.my-float2 {
font-size: 24px;
margin-top: 18px;
}


a.float2 + div.label-container2 {
visibility: hidden;
opacity: 0;
transition: visibility 3s, opacity 0.5s ease;
}

a.float2:hover + div.label-container2 {
visibility: visible;
opacity: 1;
;
}





#hideMe {
    -moz-animation: cssAnimation 1s ease-in 2s forwards;
    -webkit-animation: cssAnimation 1s ease-in 2s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 1s ease-in 2s forwards;
    /* Opera */
    animation: cssAnimation 1s ease-in 2s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    from {left: 0px;}
    to {left: 1900px;}
}
@-webkit-keyframes cssAnimation {
    from {left: 0px;}
    to {left: 1900px;}
}

yzwemnq.markdown

YzwEmNQ

A Pen by Trịnh Tấn Lộc on CodePen.

License.