Free HTML CSS Social Media Icons
Posted on March 20, 2021, 8 p.m. by Bishal ( 12390)
Hi Everyone, Code With Bishal is back with a new project. So grab your PC and open your favourite Code Editor and start coding with me. In this blog, we will create social media buttons that animates on hover. You can use these buttons on your website as share buttons. Continue reading this blog to take a demo of the project. We will use HTML and CSS to build this project. All the downloadable resources are attached to this blog, You can easily download these with the help of the buttons below.
What is Social media share buttons?
Social media share buttons are very useful while asking your users to share your articles on various social media handles. The share buttons we are going to make in this blog looks fantastic and shows an animation on hover over the buttons. The animation reveals the text/Social media website name.
How we will create the animation?
We will take the help of the CSS transform property to rotate the texts 360 degrees and you can also customize the angles with your own values. The CSS transform property helps to achieve a 2D or 3D animation to an element. The transform property supports rotate, scale, skew etc an element.
Syntax
.element{ transform: _ }Some ScreenShots:
Demo
Instagram
Github
Youtube
Facebook
Twitter
Step by step guide to create the Social Media Share buttons:
-
Create a file with the name
index.html -
Open
index.html -
Add the Broiler plate of HTML
Broiler Plate of HTML with Bootstrap CSS CDN & Font Awesome CSS linked:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>Social Media Share Button - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
-
Create a file
style.css -
Link External CSS file with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<link href="style.css" rel="stylesheet">
.wrapper {
display: inline-flex;
padding: 20%;
}
.wrapper .icon {
position: relative;
background-color: #ffffff;
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;
}
.wrapper .tooltip {
top: 0;
font-size: 14px;
color: #ffffff;
padding: 5px 8px;
border-radius: 5px;
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;
}
Full Source Code:
1) HTML Code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>Social Media Share Button - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="wrapper">
<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 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>
</body>
</html>
2) CSS Code:
.wrapper {
display: inline-flex;
padding: 20%;
}
.wrapper .icon {
position: relative;
background-color: #ffffff;
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;
}
.wrapper .tooltip {
top: 0;
font-size: 14px;
color: #ffffff;
padding: 5px 8px;
border-radius: 5px;
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;
}
.wrapper .facebook:hover .tooltip{
transform: rotate(360deg);
background-color: #3b5999;
}
.wrapper .twitter:hover .tooltip{
background-color: #46c1f6;
transform: rotate(360deg);
}
.wrapper .instagram:hover .tooltip{
background-color: #e1306c;
transform: rotate(360deg);
}
.wrapper .github:hover .tooltip{
background-color: #333333;
color: #ffffff;
transform: rotate(360deg);
}
.wrapper .youtube:hover .tooltip{
background-color: #de463b;
transform: rotate(360deg);
}
@media (max-width: 600px) {
.wrapper {
display: block;
}
}