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. Earlier I have shared a blog on how to create Glowing Effect on Social Media Icons and now I’m going to create the Tooltip for Social Media Buttons or Icons.
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.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Social Media Buttons with Tooltip).
Video Tutorial of Social Media Buttons with Tooltip
In the video, you have seen the Social Media Button with Tooltip and I hope you have understood the basic codes behind creating these icons or buttons and their tooltip too. This is a pure CSS program so if you’re a beginner, you can also easily this type of tooltip. I would like to inform you that when you click on the particular social media button, it won’t redirect you to any site. If you want to redirect on a particular site then you have to add <a href=”your site URL here”> tag inside each <div class=”icon”> tag.
If you like this program (Social Media Button with Tooltip) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use these Social Media Buttons in your HTML pages, websites, and projects.
Social Media Buttons with Tooltip [Source Codes]
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 these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.
Originally published at https://www.codingnepalweb.com on August 25, 2020.
