Hello Coders, Welcome back. In this article we are going to learn how to create social media icons with Tooltip on hover using HTML and CSS.
What is Font Awesome?
Font awesome is a library of fonts and icons which we can directly import to our project and use them however you want. For example, In the above demo you can see that those social media icons are imported from font awesome.
What is the use of using Social Media Icons?
It has a lots of advantages, You can link your other social media handles and grow your audience from one platform to other platform
I have provided all the resources and source code in this article along with a step by step video tutorial.
Popup Social Media Icons with Hover Effect using HTML and CSS | Video Tutorial
Follow the above step by step video tutorial if you are a complete beginner and finding it hard to understand this article.
Social media Icons with Tooltip on Hover in HTML and CSS | Free Source Code
I have provided the necessary HTML code and CSS code for you to follow along and build. You can also download the complete source code by clicking on the download button at the bottom of this article.
How do I create Social media icons with hover effect in HTML? Free HTML Source Code
Create an index.html. Define the boiler plate of the html document. Follow the below html code.
HTML Code : Below is the HTML code of this project. As I said we will be using Icons from the font awesome. I have included the import code in the head section of the code. Follow along with the html code step by step from top to bottom.
<!DOCTYPE html>
<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>PopUp Social Media Icons</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
</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>
How do I design social media icons with hover effect in CSS? CSS Source Code
Designing is the most important thing here. So now lets start styling it and add the hover effect. Follow the below code.
CSS Code : Create a style.css file. We will need to use a custom font and we have imported from the google fonts. Follow the below css code and type it from the top to bottom and observe the changes it makes.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus,
*:active {
outline: none !important;
-webkit-tap-highlight-color: transparent;
}
html,
body {
display: grid;
height: 100%;
width: 100%;
font-family: 'Poppins', sans-serif;
place-items: center;
background: linear-gradient(315deg, #ffffff, #d7e1ec);
}
.wrapper {
display: inline-flex;
}
.wrapper .icon {
position: relative;
background-color: #ffffff;
border-radius: 50%;
padding: 15px;
margin: 10px;
width: 50px;
height: 50px;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip {
position: absolute;
top: 0;
font-size: 14px;
background-color: #ffffff;
color: #ffffff;
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip {
top: -45px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.wrapper .tooltip::before {
position: absolute;
content: '';
height: 8px;
width: 8px;
background-color: #ffffff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
background-color: #3b5999;
color: #ffffff;
}
.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
background-color: #46c1f6;
color: #ffffff;
}
.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
background-color: #e1306c;
color: #ffffff;
}
.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
background-color: #333333;
color: #ffffff;
}
.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
background-color: #de463b;
color: #ffffff;
}
Its done, This is what you should get once done
Final Demo of Social media icons with hover effects :
Thank you for Reading this Article
Credits : Abdelrhman Said
Social Media Icons with Tooltip on hover using html and css | Download Source Code.
