DEV Community

Cover image for How to create animated share button with tooltip animation
Stackfindover
Stackfindover

Posted on • Updated on

How to create animated share button with tooltip animation

Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to create an animated share button with tooltip animation using HTML & CSS

Common Query

  1. How to create a tooltip
  2. How to create animated social icons with tooltip
  3. How to create animated social icons

See Also:- Gradient Drop Shadow

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

Step:#1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Social Icons With Tooltip Animation </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">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>

<body>
  <div class="social-icons">
    <ul class="social-listing">
      <li class="item facebook" data-text="facebook">
        <a href="https://www.facebook.com/stackfindover/" target="_blank">
          <i class="fa fa-facebook"></i>
        </a>
      </li>
      <li class="item instagram" data-text="Instagram">
        <a href="">
          <i class="fa fa-instagram"></i>
        </a>
      </li>
      <li class="item twitter" data-text="Twitter">
        <a href="">
          <i class="fa fa-twitter"></i>
        </a>
      </li>
      <li class="item pinterest" data-text="Pinterest">
        <a href="">
          <i class="fa fa-pinterest"></i>
        </a>
      </li>
    </ul>
  </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Step:#2

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

* {
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #000;
}

ul.social-listing li {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3b5998;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: transform 0.3s ease-in-out;
  position: relative;
}

ul.social-listing li a {
  color: #fff;
  font-size: 20px;
}

.social-listing li.facebook {
  background-image: linear-gradient(to right top, #3b5998, #315298, #284b98, #1d4397, #123c96);
}

.social-listing li.instagram {
  background-image: linear-gradient(to right top, #c9002c, #d6461a, #dd6f00, #dc9500, #d5b900);
}

.social-listing li.twitter {
  background-image: linear-gradient(to right top, #00acee, #00a4e2, #009bd7, #0093cb, #008bc0);
}

.social-listing li.pinterest {
  background-image: linear-gradient(to right top, #c8232c, #ca1d25, #cc151e, #ce0c16, #cf000b);
}

.social-listing .item:hover {
  transform: scale(0.90);
}

.social-listing .item:hover:before {
  opacity: 1;
}

ul.social-listing li:before {
  content: attr(data-text);
  position: absolute;
  left: 60px;
  top: 0;
  width: 80px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #1f4597;
  background: rgb(236, 236, 236);
  padding: 0 20px;
  border-radius: 50px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  cursor: auto;
}
Enter fullscreen mode Exit fullscreen mode

How to create animated share button with tooltip animation Video output

How to create animated share button with tooltip animation Codepen output

Top comments (0)