Learn how to create Pure CSS Social Media Icons for Facebook, Twitter, Instagram, GitHub, and YouTube with Tool-tip Hover Effect in this comprehensive tutorial. From design to implementation, everything is covered.
Social media has become an integral part of our lives, and businesses have started to leverage its power to reach their target audience. Including social media icons on a website or a web application is a common practice, but not everyone wants to rely on pre-made icons or external libraries. That’s where Pure CSS Social Media Icons come in.
In this tutorial, we will cover the design and implementation of Pure CSS Social Media Icons with the Tool-tip Hover Effect, using CSS3. We’ll show you how to create visually appealing social media icons from scratch, without using any images or external libraries.
Let’s start making these amazing Social Media Icons With Tool-tip Hover Effect Using HTML and Pure CSS step by step.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1:
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our social media icons. Here, To get the base shapes for the icons, we will be using the free version of font awesome. There are multiple ways to get font awesome files into your projects, but for this tutorial, I used the CDN.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser. This is the basic structure of our social media icons using HTML, and now we can move on to styling it using CSS.
<html>
 <head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
 <div class="wrapper">
 <div class="icon facebook">
   <div class="tooltip">Facebook</div>
   <span><i class="fa fa-facebook"></i></span>
 </div>
 <div class="icon twitter">
   <div class="tooltip">Twitter</div>
   <span><i class="fa fa-twitter"></i></span>
 </div>
 <div class="icon instagram">
   <div class="tooltip">Instagram</div>
   <span><i class="fa fa-instagram"></i></span>
 </div>
 <div class="icon github">
   <div class="tooltip">Github</div>
   <span><i class="fa fa-github"></i></span>
 </div>
 <div class="icon youtube">
   <div class="tooltip">YouTube</div>
   <span><i class="fa fa-youtube-play"></i></span>
 </div>
</div>
 </body>
</html>
Step 2:
Once the basic HTML structure of the social icons is in place, the next step is to add styling to the social media icons using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Read More: Create Glowing Pulse Search Bar Using HTML and Pure CSS
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our social media icons. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our icons an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@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: 100vh;
width: 100%;
font-family: "Poppins", sans-serif;
place-items: center;
background: linear-gradient(315deg, #8f3636, #d7e1ec);
}
.wrapper {
display: inline-flex;
}
.wrapper .icon {
position: relative;
background: #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);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
-webkit-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip {
position: absolute;
top: 0;
font-size: 14px;
background: #fff;
color: #ffffff;
padding: 5px 8px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
border-radius: 4px;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
.wrapper .tooltip::before {
position: absolute;
content: ";
height: 8px;
width: 8px;
background: #fff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: translate(-50%) rotate(45deg);
-moz-transform: translate(-50%) rotate(45deg);
-ms-transform: translate(-50%) rotate(45deg);
-o-transform: translate(-50%) rotate(45deg);
-webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-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 .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.01);
}
.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
background: #3b5999;
color: #fff;
}
.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
background: #46c1f6;
color: #fff;
}
.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
background: #e1306c;
color: #fff;
}
.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
background: #333333;
color: #fff;
}
.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
background: #e92828;
color: #fff;
}Final Output:
Conclusion:
With this comprehensive tutorial, you now know how to create Pure CSS Social Icons with Tool-tip Hover Effect. These icons are lightweight, visually appealing, and can be styled to match the look and feel of your website or web application.When implementing Pure CSS Social Media Icons, it’s important to keep in mind the best practices for HTML and CSS. This includes using semantic HTML, writing clean and organized CSS, and testing the icons on different devices and browsers.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
