Social Media Buttons with Hover Effect Using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Awesome Social Media Buttons with Hover Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Glowing Effect on Social Media Buttons. And now I’m going to create Social Media Buttons with Hover Effect.

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 the tooltip, there is the name of a particular hovered social media icon as you have seen in the image.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Awesome Social Media Buttons with Hover Animation).

To create this program (Social Media Buttons with Tooltip). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. You can also download the source code files through the given link. Click here to watch the demo.

HTML Code:

  <div class="social-icons">
        <a href="" class="social-icon social-icon--codepen">
          <i class="fa fa-codepen"></i> 
          <div class="tooltip">Like:620</div>
        </a>
        <!--2nd-->
        <a href="" class="social-icon social-icon--github">
            <i class="fa fa-github"></i> 
            <div class="tooltip">Like:250</div>
          </a>
          <!--3rd-->
          <a href="" class="social-icon social-icon--twitter">
            <i class="fa fa-twitter"></i> 
            <div class="tooltip">Followers:13K</div>
          </a>
          <!--4th-->
          <a href="" class="social-icon social-icon--youtube">
            <i class="fa fa-youtube"></i> 
            <div class="tooltip">Subscriber:22K</div>
          </a>
          <!--5th-->
          <a href="" class="social-icon social-icon--instagram">
            <i class="fa fa-instagram"></i> 
            <div class="tooltip">Followers:1.2K</div>
          </a>
          <!--6th-->
          <a href="" class="social-icon social-icon--facebook">
            <i class="fa fa-facebook"></i> 
            <div class="tooltip">Friends:7K</div>
          </a>

    </div>

CSS Code:

body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.social-icons{
    display: flex;
}
.social-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    font-family: "Halvetica Neue",sans-serif,"Arial";
    font-size: 2.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
    box-shadow: inset 1px 1px 2px #90a4ae,
                inset -1px -1px 2px white,
                5px 5px 10px #90a4ae,
                -5px -5px 10px white;
    border: 6px solid rgba(230,228,228);            
}
/* Tooltips */
.tooltip {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    text-transform: uppercase;
    transform: translate(-50%, -100%);
    transition: all 0.3s ease;
    z-index: 1;
  }
  .tooltip:after {
    display: block;
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 0;
    height: 0;
    content: "";
    border: solid;
    border-width: 10px 10px 0 10px;
    border-color: transparent;
    transform: translate(-50%, 100%);
  }

/* color */
.social-icon--codepen{
    background: #000;
    color: #fff;
}
.social-icon--github{
    background: #4284c0;
    color: #fff;
}
.social-icon--twitter{
    background: #2b97f1;
    color: #fff;
}
.social-icon--youtube{
    background: #fa3217;
    color: white;
}
.social-icon--instagram{
    background: #527fa6;
    color: white;
}
.social-icon--facebook{
    background: #3b5a9b;
    color: white;
}
/* Hover Effect*/
.social-icon:hover .tooltip {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -150%);
}
.social-icon--codepen .tooltip{
    background: #000;
    columns: currentColor;
}
.social-icon--codepen .tooltip::after{
    border-top-color: black;
}

.social-icon--facebook .tooltip{
    background: #3b5a9b;
    columns: currentColor;
}
.social-icon--facebook .tooltip::after{
    border-top-color: #3b5a9a;
}
.social-icon--twitter .tooltip{
    background: #2b97f1;
    columns: currentColor;
}
.social-icon--twitter .tooltip::after{
    border-top-color: #2b97f1;
}

.social-icon--youtube .tooltip{
    background: #f31344;
    columns: currentColor;
}
.social-icon--youtube .tooltip::after{
    border-top-color: #f31344;
}

.social-icon--instagram .tooltip{
    background: #527fa6;
    columns: currentColor;
}
.social-icon--instagram .tooltip:after{
    border-top-color: #527fa6;
}


.social-icon--github .tooltip{
    background: #4284c0;
    columns: currentColor;
}
/* icon after effect */
.social-icon--github .tooltip::after{
    border-top-color: #4284c0;
}

If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.

Blog

Social Media Buttons with Hover Effect Using HTML & CSS

Monalisha Mondol

Join Our Newsletter. No Spam, Only the good stuff.

Related