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

<div class="sbutton">

          <a href="https://www.reddit.com/submit?url=https://dev.to/code_jedi" target="_blank" class="sbutton reddit" tooltip="Reddit"><i class="fab fa-reddit"></i></a>

          <a href="https://twitter.com/compose/tweet?url=https://dev.to/code_jedi" target="_blank" class="sbutton twitt" tooltip="Twitter"><i class="fab fa-twitter"></i></a>  
  
          <a href="https://www.facebook.com/sharer/sharer.php?u=https://dev.to/code_jedi" target="_blank" class="sbutton fb" tooltip="Facebook"><i class="fab fa-facebook-f"></i></a>

          <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://dev.to/code_jedi" target="_blank" class="sbutton linked" tooltip="Linkedin"><i class="fab fa-linkedin"></i></a>

</div> 

    </div> 

    <div style="width:60%; position: absolute; left: 20%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam id elit et dictum. Curabitur porttitor enim at turpis iaculis lacinia. Nam scelerisque felis sed tincidunt viverra. Etiam blandit molestie libero a pretium. Pellentesque quis mattis enim. Praesent mattis arcu eget consequat vulputate. Ut odio libero, vulputate quis leo condimentum, blandit porta metus. Donec tincidunt vel ex eget dictum. Cras vel magna et tellus rhoncus malesuada id vel neque. In ut blandit turpis. Nullam scelerisque hendrerit elementum.

        Pellentesque ornare eleifend nibh ac suscipit. Nullam vel lacus vitae justo aliquet suscipit at ut nibh. Duis non cursus orci. Donec et accumsan enim. Proin sed urna vel urna interdum sollicitudin. In volutpat justo ac enim euismod sagittis. Fusce dapibus vitae orci sit amet accumsan. Vivamus condimentum, arcu eget molestie feugiat, nulla leo faucibus mauris, sed interdum orci ipsum et augue. Sed at auctor mauris, vel dignissim nisl. Nulla facilisi. Phasellus venenatis ultrices feugiat. Vivamus pellentesque ligula ac neque facilisis, sed venenatis purus pulvinar. Pellentesque molestie massa arcu, at vulputate ex varius id. Donec eget condimentum nunc. Duis laoreet mauris non ornare vulputate.
        
        Nullam placerat commodo enim, consectetur egestas augue fermentum et. Nunc fringilla placerat gravida. Sed volutpat ac tellus vel interdum. Nulla congue justo nec aliquam vehicula. Etiam vulputate cursus est vitae scelerisque. Mauris a congue mauris. Integer nisi mauris, feugiat ac nibh ut, faucibus euismod diam. Suspendisse a ipsum massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. In blandit gravida gravida. Suspendisse vel facilisis urna. Suspendisse ac est dapibus, ultricies ante in, tempor neque. Proin non lacinia lectus, ac ultricies nisi. In hac habitasse platea dictumst.
        
        Etiam et tincidunt ex. Fusce ac odio quam. Maecenas vitae tortor sollicitudin augue ornare fermentum at nec mauris. Donec in augue et velit tincidunt malesuada vel sed orci. Vestibulum mollis ante vel elementum imperdiet. Nulla sed rutrum magna. Suspendisse dictum faucibus purus, et auctor magna efficitur vel. Vestibulum eu quam ut dui dictum luctus. Integer in libero quam. Aliquam laoreet mauris vitae tincidunt ultrices.
        
        Praesent mollis tempor odio, scelerisque viverra eros iaculis vel. Proin et turpis vehicula, laoreet justo sed, finibus odio. Maecenas in nisl eu dolor facilisis volutpat. Donec quis velit vitae enim hendrerit fermentum porta eu urna. Sed ut ante ornare, suscipit metus id, faucibus ante. Vivamus eget augue vitae sem lacinia dictum sit amet sed lectus. Aliquam vitae blandit arcu, sit amet blandit ipsum. Vivamus vel quam ac turpis fermentum iaculis ut nec urna. Nunc imperdiet mauris sit amet lacus pretium, eu rhoncus nisi congue. Maecenas placerat luctus mauris pretium vulputate.
        
        Suspendisse mollis nulla nisl, sed aliquet ipsum iaculis fermentum. Curabitur cursus non enim ultrices tempus. Nulla eget vehicula sem. Suspendisse pretium lectus diam, ut bibendum ex placerat non. Aliquam ac ante ac enim cursus dignissim. In varius gravida massa eu tempus. Mauris vestibulum eu erat a pulvinar. In blandit, diam at rhoncus dapibus, dolor dolor egestas diam, sit amet posuere arcu risus ac est. Sed vehicula cursus sodales. Proin vel libero eget risus ornare vestibulum. Curabitur semper, augue sed maximus maximus, nisi neque congue magna, vel rutrum magna mi et ante.
        
        Nullam semper ante sed eros lacinia tempor. Morbi cursus nec lorem eu bibendum. Vestibulum iaculis lobortis velit vel consequat. Aliquam a nisi lacus. Vivamus eu lacinia purus, nec mattis metus. Cras vel lacus urna. Vestibulum bibendum felis at felis viverra vestibulum. Maecenas eu mollis quam. Etiam facilisis a nunc non sagittis. Duis vehicula, justo et vehicula consectetur, arcu ex posuere libero, viverra maximus nulla ligula fermentum orci.
        
        Donec eu metus congue, auctor libero eget, ornare lorem. Fusce porttitor lacus a tincidunt pellentesque. In hac habitasse platea dictumst. Aliquam id rutrum quam. Fusce vitae semper sapien. Vestibulum blandit pharetra facilisis. Sed interdum porta commodo. Mauris luctus eget dolor in tempus. Proin auctor enim vel nibh bibendum fringilla. Donec vel sapien lectus.
        
        Curabitur facilisis tellus at porta euismod. Quisque sed eros quis arcu eleifend sollicitudin sit amet ut lectus. Donec mollis mauris erat, vitae vestibulum ex imperdiet et. Aliquam sit amet auctor velit, vitae sollicitudin ante. Etiam vitae orci a turpis feugiat auctor. Suspendisse congue ante purus, eu vulputate massa tincidunt nec. Mauris sollicitudin commodo lacus in condimentum. Nam aliquam blandit velit quis sodales. Mauris cursus sagittis velit. Proin rhoncus tortor egestas aliquam luctus. Donec luctus, dui eu facilisis fermentum, dolor nunc egestas dolor, at vehicula ex lectus quis odio. Proin et mi ultrices ex hendrerit porta laoreet ac neque. Praesent eget dictum elit. Aliquam ultrices a urna dapibus imperdiet. Aenean nec leo tellus. Curabitur nec risus dui.
        
</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;
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.