In this tutorial we will learn how to create a animated floating Social widget, for reference please see the image below. It will enhance visitor experience of your / your client Website, you can add on your HTML based / WordPress based website also, you can our website also uses this floating widget.
In first step we need a add html code anywhere between <body> </body> tag, second we need to add css code anywhere between <body> </body> tag or in external css file
HTML CODE
<div id="fixed-tabs">
<a href="https://www.facebook.com/codentricks" class="fb">
<span><i class="fab fa-facebook" aria-hidden="true"></i><em>Like Us</em></span>
<span class="hideMobile"><strong>Like Us Facebook</strong> </span>
</a>
<a href="https://www.youtube.com/@Codentricks" class="po">
<span><i class="fab fa-youtube" aria-hidden="true"></i><em>Subscribe</em></span>
<span class="hideMobile"><strong>Subscribe us YouTube</strong></span>
</a>
<a href="https://api.whatsapp.com/send?phone=+9190071234567890&text=Hello" class="call" data-action="share/whatsapp/share">
<span><i class="fab fa-whatsapp" aria-hidden="true"></i><em>Whatsapp</em></span>
<span class="hideMobile"><strong>Contact us on Whatsapp</strong></span>
</a>
<a href="https://www.codentricks.com/contact/" class="ra" data-toggle="modal" data-target="#exampleModal">
<span><i class="fas fa-phone-alt" aria-hidden="true"></i><em>Request</em></span>
<span class="hideMobile"><strong>Request a Call back</strong></span>
</a>
</div>
CSS CODE
<style>
#fixed-tabs a {
text-decoration: none;
font-size: 15px;
background-color: #90b1f4;
color: #fff;
position: relative;
overflow: hidden;
transition: width .3s; }
#fixed-tabs i {
font-size: 20px;
}
#fixed-tabs i, #fixed-tabs i:before {
display: block;
margin: 0 auto !important; }
#fixed-tabs em {
font-size: 10px;
text-align: center;
font-style: normal;
margin-top: 8px;
display: none;
font-weight: 600; }
#fixed-tabs strong {
font-weight: 300; }
#fixed-tabs .ra {
background-color: #222324; }
#fixed-tabs .fb {
background-color: #0154a4; }
#fixed-tabs .gp {
background-color: #0154a4; }
#fixed-tabs .so i {
background: url(assets/images/ico-rab.png) no-repeat center center;
background-size: auto 100%; }
#fixed-tabs .so i:before {
opacity: 0; }
#fixed-tabs .call {
background-color: #0c9312; }
#fixed-tabs .call, #fixed-tabs .map {
display: block;
}
#fixed-tabs a.po {
background-color: #E32E19;
}
@media (min-width: 1001px) {
#fixed-tabs a {
background-color: #4542a9; }
#fixed-tabs a.ra {
background-color: #222324; }
#fixed-tabs a.fm {
background-color: #0154a4; }
#fixed-tabs a.po {
background-color: #E32E19;
}
#fixed-tabs {
position: absolute;
top: 320px; }
#fixed-tabs a {
display: block;
text-align: left;
margin-left: auto;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4); }
#fixed-tabs a + a {
margin-top: 8px; }
#fixed-tabs a span {
display: block; }
#fixed-tabs a span:first-child {
text-align: center;
padding: 7px 0; }
#fixed-tabs a, #fixed-tabs a span:first-child, .scrolled #fixed-tabs a, .scrolled #fixed-tabs a span:first-child {
width: 30px; }
.scrolled #fixed-tabs a span:last-child, #fixed-tabs a span:last-child {
position: absolute;
left: 40px;
top: 50%;
width: 220px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: width .3s;
transition: width .3s; }
.scrolled #fixed-tabs a:hover, #fixed-tabs a:hover {
width: 200px; } }
#fixed-tabs {
position: fixed;
right: 0;
text-align: center;
line-height: 1;
font-size: 0;
z-index: 22500;
}
@media (min-width: 1280px) {
#fixed-tabs {
position: fixed;
top: 350px;
z-index: 22500;
}
#fixed-tabs a, #fixed-tabs a span:first-child {
width: 75px; }
#fixed-tabs a span:last-child {
left: 80px; }
#fixed-tabs a:hover {
width: 250px; }
#fixed-tabs i {
font-size: 20px;
}
#fixed-tabs em {
display: block; }
.scrolled #fixed-tabs a, .scrolled #fixed-tabs a span:first-child {
width: 30px; }
.scrolled #fixed-tabs em {
display: none; }
.scrolled #fixed-tabs i {
font-size: 16px; }
#fixed-tabs .fb:hover {
background-color: #0154a4 !important; }
#fixed-tabs .so:hover {
background-color: #84bd00 !important; }
#fixed-tabs .gp:hover {
background-color: #0154a4 !important; } }
@media (max-width: 1000px) {
#fixed-tabs {
bottom: 0;
width: 100%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
#fixed-tabs a {
padding: 12px 0;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1; }
#fixed-tabs a span {
display: inline-block;
vertical-align: middle; }
#fixed-tabs a span:last-child {
margin-left: 7px; }
#fixed-tabs a strong {
display: none; }
#fixed-tabs a strong.hider {
display: inline; }
#fixed-tabs a.fm {
background-color: #0a0908; }
</style>