DEV Community

Cover image for How to make an animated share button
Stackfindover
Stackfindover

Posted on • Updated on

How to make an animated share button

Hello, guys in this tutorial we will create an animated share button using HTML CSS & jQuery

How do share buttons work?

Instead of copying and pasting a link to an item, blog post, or product on the page, a viewer can simply click the button and, often, an auto-populated tweet of Facebook status pops up. These buttons seem like a great idea – after all, they make sharing your content easy Download Report

First, we need to create two files index.html and style.css then we need to do code for it.

Animated Share Button Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sticky Share Buttons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="sticky_share_btn">
      <div class="fixed_share">
        <ul class="listing">
          <li class="facebook">
            <a href="#">
              <i class="fa fa-facebook-square"></i>
            </a>
          </li>
          <li class="twitter">
            <a href="#">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="pinterest">
            <a href="#">
              <i class="fa fa-pinterest"></i>
            </a>
          </li>
          <li class="linkedin">
            <a href="#">
              <i class="fa fa-linkedin-square"></i>
            </a>
          </li>
          <li class="whatsapp">
            <a href="#">
              <i class="fa fa-whatsapp"></i>
            </a>
          </li>
        </ul>
        <span class="share-toggle">
          <i class="fa fa-share-alt"></i>
        </span>
      </div>
    </div>

    <script type="text/javascript">
      jQuery(".sticky_share_btn").click(function(){
        jQuery(".listing").fadeToggle(600);
      });
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Animated Share Button Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  outline: 0;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw; 
    overflow: hidden;
}
.sticky_share_btn {
    position: fixed;
    left: 30px;
    bottom: 30px;
}
.share-toggle,
.fixed_share ul.listing > li {
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid;
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
}
ul.listing {
    list-style: none;
    display: none;
}
.fixed_share ul.listing > li {
  margin-bottom: 10px; 
}
.fixed_share ul.listing > li > a {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
}
.share-toggle:hover,
.fixed_share ul.listing > li:hover {
  transform: scale(1.1) rotate(360deg);
}

.fixed_share .facebook, 
.fixed_share .facebook > a{
  color: #4267B2;
}
.fixed_share .twitter, 
.fixed_share .twitter > a{
  color: #00acee;
}
.fixed_share .pinterest, 
.fixed_share .pinterest > a{
  color: #E60023;
}
.fixed_share .linkedin, 
.fixed_share .linkedin > a{
  color: #0e76a8;
}
.fixed_share .whatsapp, 
.fixed_share .whatsapp > a{
  color: #25D366;
}
Enter fullscreen mode Exit fullscreen mode

Animated Share Button Video Output:

Animated Share Button CodePen Output:

Top comments (0)