Pure CSS Social Media Icons With Tooltip Hover Effect

Faraz

By Faraz -

Learn how to create Pure CSS Social Media Icons for Facebook, Twitter, Instagram, GitHub, and Youtube with Tooltip Hover Effect in this comprehensive tutorial. From design to implementation, everything is covered.

Join us on Telegram
socialmedia.png
Read AlsoCreate Your Own SVG Polygon Generator using HTML, CSS, and JavaScript.jpgSVG Polygon Generator: Coding Tutorial for Custom Shapes

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Preview
  5. Conclusion

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 Tooltip 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 Tooltip Hover Effect Using HTML and Pure CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

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 (HTML Code):

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.

Read AlsoCreating Skeleton Loading Using HTML and CSS (Source Code Included).jpgCreating Skeleton Loading Using HTML and CSS (Source Code Included)

Step 2 (CSS Code):

Once the basic HTML structure of the social media 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.

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:

socialmedia.gif
Read AlsoCreate a Stunning Resume with Tailwind CSS.jpgCreate a Stunning Resume with Tailwind CSS (Source Code)

Conclusion:

With this comprehensive tutorial, you now know how to create Pure CSS Social Media Icons with Tooltip 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.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: Pure CSS, Social Media Icons, Tooltip Hover Effect, CSS3, HTML
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post