<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet"> 

<div class="sbutton">

          <a href="#" target="_blank" class="sbutton reddit" tooltip="Reddit"><i class="fab fa-reddit"></i></a>

          <a href="#" target="_blank" class="sbutton twitt" tooltip="Twitter"><i class="fab fa-twitter"></i></a>  
  
          <a href="#" target="_blank" class="sbutton fb" tooltip="Facebook"><i class="fab fa-facebook-f"></i></a>

          <a href="#" target="_blank" class="sbutton linked" tooltip="Linkedin"><i class="fab fa-linkedin"></i></a>

      </div> 

        .sbutton {
          width: 60px;
          height: 60px;
          position: fixed;
          left: 20px;
          border-radius: 25%;
          text-align: center;
          margin-top: 20px;
          color: white;
          cursor: pointer;
        }
        .sbutton > i {
          font-size: 38px;
          line-height: 60px;
        }
        .sbutton.reddit {
          background: darkorange;
        }
        .sbutton.twitt {
          background: #03A9F4;
          margin-top: 100px;
        }
        .sbutton.fb {
          background: #3F51B5;
          margin-top: 180px;
        }
        .sbutton.linked {
          background: rgb(10, 128, 224);
          margin-top: 260px;
        }