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.
Table of Contents
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.
<html>
- The root element of the HTML document.
<head>
The head section contains meta-information about the document, including:
<meta charset="UTF-8" />: Sets the character encoding of the document to UTF-8.<title>Social Media Icons With Tooltip</title>: Specifies the title of the webpage, which appears in the browser's title bar or tab.<link rel="stylesheet" type="text/css" href="styles.css" />: Links an external CSS file named styles.css for styling the webpage.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">: Links the Font Awesome CSS library for using social media icons.
<body>
- The body section contains the content of the webpage.
<div class="wrapper">
- A container div element that wraps all the social media icons.
Social Media Icon Blocks
Each social media icon is contained in a div with a class of icon followed by the social media platform's name (e.g., facebook, twitter).
Structure of Each Icon Block
<div class="icon facebook">
- class="icon facebook": Adds two classes to the div: icon for general icon styling and facebook for specific styling for Facebook.
<div class="tooltip">Facebook</div>
- Contains a div with the class tooltip which displays the tooltip text when hovered over.
<span><i class="fa fa-facebook"></i></span>
- Uses a
<span>element containing an<i>element with Font Awesome classes (fa and fa-facebook) to display the Facebook icon.
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.
Here's an explanation of the CSS code:
Importing a Font
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
- This imports the "Poppins" font from Google Fonts, making it available for use in the styles.
2. Resetting Styles
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
- This resets the default margin and padding for all elements and sets the box-sizing property to border-box to include padding and border in the element's total width and height.
3. Removing Focus Outlines
*:focus,
*:active {
outline: none !important;
-webkit-tap-highlight-color: transparent;
}
- This removes the default focus outlines and tap highlight color for focused and active elements.
4. Styling HTML and Body
html,
body {
display: grid;
height: 100vh;
width: 100%;
font-family: "Poppins", sans-serif;
place-items: center;
background: linear-gradient(315deg, #8f3636, #d7e1ec);
}
- display: grid: Uses the grid layout.
- height: 100vh: Sets the height to 100% of the viewport height.
- width: 100%: Sets the width to 100% of the viewport width.
- font-family: "Poppins", sans-serif: Sets the font family to "Poppins".
- place-items: center: Centers the items horizontally and vertically.
- background: linear-gradient(315deg, #8f3636, #d7e1ec): Sets a linear gradient background.
5. Styling the Wrapper
.wrapper {
display: inline-flex;
}
- This sets the wrapper to use inline flexbox layout.
6. Styling Icons
.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);
}
- position: relative: Positions the icon relative to its normal position.
- background: #ffffff: Sets the background color to white.
- border-radius: 50%: Makes the icon circular.
- padding: 15px: Adds padding inside the icon.
- margin: 10px: Adds margin around the icon.
- width and height: Sets the dimensions of the icon.
- font-size: 18px: Sets the font size.
- display: flex: Uses flexbox layout.
- justify-content: center: Centers content horizontally.
- align-items: center: Centers content vertically.
- flex-direction: column: Aligns content in a column.
- box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1): Adds a shadow.
- cursor: pointer: Changes the cursor to a pointer.
- transition: Adds a transition effect for animations.
7. Styling Tooltips
.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);
}
- position: absolute: Positions the tooltip absolutely.
- top: 0: Positions the tooltip at the top.
- font-size: 14px: Sets the font size.
- background: #fff: Sets the background color to white.
- color: #ffffff: Sets the text color to white (although it won't be visible on a white background).
- padding: 5px 8px: Adds padding inside the tooltip.
- box-shadow: Adds a shadow.
- opacity: 0: Makes the tooltip initially invisible.
- pointer-events: none: Disables pointer events.
- border-radius: 4px: Rounds the corners.
- transition: Adds a transition effect for animations.
8. Styling Tooltip Arrow
.wrapper .tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background: #fff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
}
- position: absolute: Positions the arrow absolutely.
- content: "": Creates a pseudo-element.
- height and width: Sets the dimensions of the arrow.
- background: #fff: Sets the background color.
- bottom: -3px: Positions the arrow at the bottom.
- left: 50%: Centers the arrow horizontally.
- transform: translate(-50%) rotate(45deg): Moves the arrow to the correct position and rotates it.
9. Hover Effects for Tooltip
.wrapper .icon:hover .tooltip {
top: -45px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
- top: -45px: Moves the tooltip upwards on hover.
- opacity: 1: Makes the tooltip visible.
- visibility: visible: Ensures the tooltip is visible.
- pointer-events: auto: Enables pointer events.
10. Hover Effects for Icon Text Shadow
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.01);
}
- Adds a slight text shadow to the span and tooltip text on hover.
11. Hover Effects for Specific Icons
.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
background: #3b5999;
color: #fff;
}
- Similar hover effects are applied for Twitter, Instagram, GitHub, and YouTube icons, changing their background and text colors accordingly.
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 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 😊
