Social Media Buttons with Tooltip on Hover using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create the Social Media Buttons with Tooltip on Hover using only HTML & CSS. The Social Media Buttons allow your website visitors and content viewers to easily share your content with their social media connections and networks. A tooltip is a short, informative message that appears when a user interacts with an element.

In this program (Social Media Buttons with Tooltip), at first, on the webpage, there are five social media buttons – Facebook, Twitter, Instagram, Github, and YouTube. When you hover on a particular button or icon then the tooltip appears with sliding animation and the background color of a button also changes with the default icon color. Inside tooltip, there is the name of a particular hovered social media icon as you have seen in the image.

image

HTML CODE

<!DOCTYPE html>
<!-- Created By SpicyCoder | www.spicycoder.tech -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Media Buttons with Tooltip on Hover using only HTML & CSS | SpicyCoder</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/fddb5bf1f7.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="wrapper">
        <div class="icon facebook">
            <div class="tooltip">
                Facebook
            </div>
            <span><i class="fab fa-facebook-f"></i></span>
        </div>
        <div class="icon twitter">
            <div class="tooltip">
                Twitter
            </div>
            <span><i class="fab fa-twitter"></i></span>
        </div>
        <div class="icon instagram">
            <div class="tooltip">
                Instagram
            </div>
            <span><i class="fab fa-instagram"></i></span>
        </div>
        <div class="icon github">
            <div class="tooltip">
                Github
            </div>
            <span><i class="fab fa-github"></i></span>
        </div>
        <div class="icon youtube">
            <div class="tooltip">
                YouTube
            </div>
            <span><i class="fab fa-youtube"></i></span>
        </div>
        </div>
</body>
</html>

CSS CODE

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&amp;display=swap');
            *{
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              font-family: 'Poppins', sans-serif;
            }
            html,body{
              display: grid;
              height: 100%;
              width: 100%;
              place-items: center;
              background: #E4EFE7;
            }
            .wrapper{
              display: inline-flex;
            }
            .wrapper .icon{
              margin: 0 20px;
              text-align: center;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              position: relative;
              z-index: 2;
              transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }
            .wrapper .icon span{
              display: block;
              height: 60px;
              width: 60px;
              background: #fff;
              border-radius: 50%;
              position: relative;
              z-index: 2;
              box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
              transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }
            .wrapper .icon span i{
              line-height: 60px;
              font-size: 25px;
            }
            .wrapper .icon .tooltip{
              position: absolute;
              top: 0;
              z-index: 1;
              background: #fff;
              color: #fff;
              padding: 10px 18px;
              font-size: 20px;
              font-weight: 500;
              border-radius: 25px;
              opacity: 0;
              pointer-events: none;
              box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
              transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }
            .wrapper .icon:hover .tooltip{
              top: -70px;
              opacity: 1;
              pointer-events: auto;
            }
            .icon .tooltip:before{
              position: absolute;
              content: "";
              height: 15px;
              width: 15px;
              background: #fff;
              left: 50%;
              bottom: -6px;
              transform: translateX(-50%) rotate(45deg);
              transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }
            .wrapper .icon:hover span{
              color: #fff;
            }
            .wrapper .icon:hover span,
            .wrapper .icon:hover .tooltip{
              text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
            }
            .wrapper .facebook:hover span,
            .wrapper .facebook:hover .tooltip,
            .wrapper .facebook:hover .tooltip:before{
              background: #3B5999;
            }
            .wrapper .twitter:hover span,
            .wrapper .twitter:hover .tooltip,
            .wrapper .twitter:hover .tooltip:before{
              background: #46C1F6;
            }
            .wrapper .instagram:hover span,
            .wrapper .instagram:hover .tooltip,
            .wrapper .instagram:hover .tooltip:before{
              background: #e1306c;
            }
            .wrapper .github:hover span,
            .wrapper .github:hover .tooltip,
            .wrapper .github:hover .tooltip:before{
              background: #333;
            }
            .wrapper .youtube:hover span,
            .wrapper .youtube:hover .tooltip,
            .wrapper .youtube:hover .tooltip:before{
              background: #DE463B;
            }
Related Posts
Text Typing Animation using only HTML & CSS
  July 04, 2021     SpicyCoder
3D Social Media Buttons using only HTML & CSS
  July 03, 2021     SpicyCoder
Neumorphism Analog Clock using HTML CSS & JavaScript
  July 10, 2021     SpicyCoder