Create a CSS based animated Floating Social Widget

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&amp;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>