Learn how to create custom social media icons with Pure CSS and custom tooltips using HTML and CSS in this step-by-step guide.
Table of Contents
Welcome to this tutorial on how to create pure CSS social media icons with custom tooltips using HTML and CSS. In this post, we'll go over the steps you need to take to create your own custom social media icons and tooltips using only CSS.
Before we get started, it's important to understand what Pure CSS is and why custom social media icons with custom tooltips are important for your website. Pure CSS is a way of styling web pages using only CSS without any JavaScript or other programming languages. This has several benefits, including faster load times, easier maintenance, and improved accessibility.
Social media icons are an essential part of web design. Most of the time, designers and developers look for a simple button with a social icon on it. But let's be honest - the basic and standard icons are boring. They are everywhere and nothing distinguishes them.
Custom social media icons can help make a website stand out and reflect its branding. Custom tooltips can provide additional information about the icons and improve the user experience. By using Pure CSS to create these icons and tooltips, you'll be able to ensure that they load quickly and are easy to maintain.
In this post, we'll cover how to build the HTML for your social media icons and tooltips, how to style them with CSS, and how to add hover effects. By the end of this tutorial, you'll have the skills you need to create your own custom social media icons and tooltips using only HTML and CSS.
Watch the full tutorial on my YouTube Channel: Watch Here.
Let's start making an amazing social media icons with custom tooltips 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 with custom tooltips.
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.
The HTML document starts with a doctype declaration that tells the browser the version of HTML being used. The language of the document is specified as English in the opening HTML tag.
The head section of the document contains several meta tags that set the character encoding and define the viewport of the document, which is important for displaying the page properly on different devices. The title tag sets the title of the document that appears in the browser tab. Two stylesheets are linked in the head section, one for custom styles and the other for Font Awesome icons, which are being used in the social media icons.
The body section of the document contains a container div that holds the social media icons. Each social media icon is created with an anchor tag, which wraps around a div with a class of "section." Each "section" div has a custom tooltip that is displayed when the user hovers over the icon. The tooltip is defined using the "tooltip" attribute, which is a custom attribute defined in the styles.css stylesheet.
Inside each "section" div, there is another div with a class of "icon" that contains the Font Awesome icon for the respective social media platform. The class name of each "section" div corresponds to the social media platform it represents, and is used to style each icon differently.
Overall, this HTML document creates a responsive and visually appealing display of social media icons with custom tooltips using HTML and CSS, with the help of the Font Awesome icon library.
This is the basic structure of our social media icons with custom tooltips using HTML, and now we can move on to styling it using CSS.
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.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our social media icons with custom tooltip.
The stylesheet contains several rules that are used to set the styles for different elements on the page.
The first rule sets the font family and font size for the entire body of the HTML document. The "sans-serif" font family is used, which is a generic font family that can be used on a wide range of devices.
The container class rule sets the display property to flex and sets the justify-content and align-items properties to center. This is used to horizontally and vertically center the social media icons within the container. The position property is set to absolute and the inset property is set to 0 to position the container div to cover the entire viewport.
The section class rule sets the background color to black, the text color to white, and the height and width to 36 pixels. The margin property is used to create spacing between each icon. The padding property adds space between the text and the border of the icon. The border-radius property creates rounded corners for the icon. The display property is set to inline-flex to allow the icon to display inline with the surrounding content. The white-space property is set to nowrap and the overflow property is set to hidden to prevent the tooltip from overflowing outside the icon. The box-shadow property is used to create a subtle shadow effect for the icon. The transition property is used to set the animation when the user hovers over the icon, changing the width and background color of the icon.
The icon class rule sets the display property to flex and sets the justify-content and align-items properties to center. This is used to vertically and horizontally center the Font Awesome icon inside the section div. The height property and aspect-ratio property are set to maintain the aspect ratio of the icon.
The a rule sets the text-decoration property to none to remove the underline from the anchor tag.
The .section:hover rule sets the width to 140 pixels when the user hovers over the icon, and changes the transition time for the width and background-color properties.
The .section::after rule is used to add the tooltip text after the section div. The content property is used to set the tooltip text, which is defined in the HTML document using the custom tooltip attribute.
The .facebook:hover, .instagram:hover, .youtube:hover, .twitter:hover, and .github:hover rules change the background color of the icon to the respective social media platform's brand color when the user hovers over the icon.
Overall, this CSS stylesheet is used to style the social media icons and tooltips created in the HTML document. It uses a variety of CSS properties to create a visually appealing and responsive display of social media icons.
This will give our social media icons with custom tooltip 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.
body{
font-family: sans-serif;
font-size: 14px;
}
.container{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
inset: 0;
}
.section{
background-color: #000;
color: #fff;
height: 36px;
width: 36px;
margin: 0px 7px 0px;
padding: 5px;
border-radius: 8px;
display: inline-flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
box-shadow: 5px 5px 8px rgba(0,0,0,0.9);
transition: width 300ms ease-in-out 0s, background-color 300ms linear 200ms;
}
.icon{
display: flex;
justify-content: center;
align-items: center;
height: 36px;
aspect-ratio: 1 / 1;
}
a{
text-decoration: none;
}
.section:hover{
width: 140px;
transition: width 300ms ease-in-out 0s, background-color 100ms linear 0s;
}
.section::after{
content: attr(tooltip);
margin-left: 10px;
}
.facebook:hover{
background: #3b5998;
}
.instagram:hover{
background: #3f729b;
}
.youtube:hover{
background: #cd201f;
}
.twitter:hover{
background: #55acee;
}
.github:hover{
background: #00405d;
} Final Output:
Conclusion:
In conclusion, we hope that this tutorial has provided you with a comprehensive guide on how to create pure CSS social media icons with custom tooltips using HTML and CSS. By following the steps outlined in this post, you'll be able to create custom social media icons and tooltips that are unique to your website and help it stand out from the crowd.
Using Pure CSS to create your social media icons and tooltips has many benefits, including faster load times, easier maintenance, and improved accessibility. By utilizing data attributes and CSS pseudo-elements, you can create tooltips that provide additional information and improve the user experience.
By styling your icons and tooltips with CSS, you'll be able to create a look and feel that is unique to your website. Adding hover effects can also provide additional interactivity and make your icons and tooltips even more engaging.
We hope that you found this tutorial helpful and that you're now ready to create your own custom social media icons and tooltips using only HTML and CSS. With the skills you've learned in this tutorial, you'll be able to take your website to the next level and provide your users with an even better experience.
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 😊
