Icon social

**** HTML:

 <div class="ppocta-ft-fix">

    <div id="zaloButton">

        <a href="http://zalo.me/0961054610" target="_blank" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Zalo Button', 'Mobile']);"><i></i></a>

<a href="" class="txt" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Call Button', 'Mobile']);"><span>Zalo</span></a>

    </div>

<div id="viberButton">

        <a href="tel:0961054610" target="_blank" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Viber Button', 'Mobile']);"><i></i></a>

<a href="tel:0961054610" class="txt" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Call Button', 'Mobile']);"><span>Viber</span></a>

    </div>

<div id="wechatButton">

        <a href="tel:0961054610" target="_blank" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Wechat Button', 'Mobile']);"><i></i></a>

<a href="tel:0961054610" class="txt" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Call Button', 'Mobile']);"><span>Wechat</span></a>

    </div>

<div id="whatsappButton">

        <a href="tel:0961054610" target="_blank" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Whatsapp Button', 'Mobile']);"><i></i></a>

<a href="tel:0961054610" class="txt" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Call Button', 'Mobile']);"><span>Whatsapp</span></a>

    </div>

    <div id="callNowButton">

        <a href="tel:0961054610" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Call Button', 'Mobile']);"><i></i></a>

        <a href="tel:0961054610" class="txt" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Call Button', 'Mobile']);"><span>HOTLINE TƯ VẤN</span></a>

    </div>

</div>

**** Css:

.ppocta-ft-fix {

    position: fixed;

    bottom: 5px;

    left: 10px;

    min-width: 120px;

    text-align: center;

    z-index: 9999;

}

#zaloButton {

    display: inline-block;

    margin-right: 10px;

    width: 50px;

    height: 50px;

    background: #5AC5EF;

    border-radius: 50%;

    box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);

    position: relative;

}

#zaloButton a, 

#viberButton a, 

#wechatButton a, 

#whatsappButton a {

    display: block;

    text-decoration: none;

    outline: none;

    color: #fff;

    text-align: center;

}

#zaloButton>a>i {

    background: url(../images/zalo.png) center center no-repeat;

    background-size: 57%;

    width: 50px;

    height: 50px;

    display: inline-block;

}

#zaloButton a.txt {

    position: absolute;

    top: -40px;

    left: calc(100% - 52px);

    width: 60px;

    max-width: 60px;

    line-height: 2;

    text-transform: uppercase;

    border-radius: 5px;

    font-size: 13px;

    z-index: 1;

}

#zaloButton a.txt {

    background: #0072b2;

}

#zaloButton a, #viberButton a, #wechatButton a, #whatsappButton a {

    display: block;

    text-decoration: none;

    outline: none;

    color: #fff;

    text-align: center;

}

#viberButton {

    display: inline-block;

    margin-right: 10px;

    width: 50px;

    height: 50px;

    background: #7c529d;

    border-radius: 50%;

    box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);

    position: relative;

}

#viberButton>a>i {

    background: url(../images/viber.png) center center no-repeat;

    background-size: 57%;

    width: 50px;

    height: 50px;

    display: inline-block;

}

#viberButton a.txt {

    position: absolute;

    top: -40px;

    left: calc(100% - 52px);

    width: 60px;

    max-width: 60px;

    line-height: 2;

    text-transform: uppercase;

    border-radius: 5px;

    font-size: 13px;

    z-index: 1;

}

#viberButton a.txt {

    background: #7c529d;

}

#wechatButton {

    display: inline-block;

    margin-right: 10px;

    width: 50px;

    height: 50px;

    background: #20c300;

    border-radius: 50%;

    box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);

    position: relative;

}

#wechatButton>a>i {

    background: url(../images/wechat.png) center center no-repeat;

    width: 48px;

    height: 48px;

    display: inline-block;

}

#wechatButton a.txt {

    background: #20c300;

}

#whatsappButton {

    display: inline-block;

    margin-right: 10px;

    width: 50px;

    height: 50px;

    background: #57bb63;

    border-radius: 50%;

    box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);

    position: relative;

}

#whatsappButton>a>i {

    background: url(../images/whatsapp.png) center center no-repeat;

    width: 48px;

    height: 48px;

    display: inline-block;

}

#whatsappButton a.txt {

    background: #57bb63;

}

#callNowButton {

    display: inline-block;

    position: relative;

    border-radius: 50%;

    color: #fff;

    width: 50px;

    height: 50px;

    line-height: 50px;

    box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);

}

#callNowButton a {

    display: block;

    text-decoration: none;

    outline: none;

    color: #fff;

    text-align: center;

}

#callNowButton i {

    border-radius: 50%;

    display: inline-block;

    width: 50px;

    height: 50px;

    background: url(../images/callbutton.png) center center no-repeat #ef1c25;

}

#callNowButton a.txt {

    position: absolute;

    top: -40px;

    left: calc(50% - 60px);

    background: #ef1c25;

    width: 120px;

    max-width: 120px;

    line-height: 2;

    text-transform: uppercase;

    border-radius: 5px;

    font-size: 13px;

}

#callNowButton a.txt:after {

    position: absolute;

    bottom: -8px;

    left: 50px;

    content: "";

    width: 0;

    height: 0;

    border-top: 8px solid #ef1c25;

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

}

#zaloButton:hover a.txt,
 #viberButton:hover a.txt,
#wechatButton:hover a.txt,
 #whatsappButton:hover a.txt {

    display: inline-block;

}

#zaloButton a.txt, #viberButton a.txt, #wechatButton a.txt, #whatsappButton a.txt {

    position: absolute;

    top: -40px;

    left: calc(50% - 37px);

    width: 80px;

    max-width: 80px;

    line-height: 2;

    text-transform: uppercase;

    border-radius: 5px;

    font-size: 13px;

    display: none;

    z-index: 1;

}