 |
| Social media icons using html and css |
In this Article, we will learn about how to create Social media icons for website using html and css with source code. Creating Social media icons for website using html and css is simple with the given tutorial, which provides a simple step-by-step process to design Social media icons using html and css. So, let's go and follow the steps carefully.
Steps to create and add social media icons for website using html and css
Here are the Steps to create Social media icons for website using html and css as given below :-
1) Creating File on VS CODE :
Open VS Code, Create a new folder and add html and css file.
2) Adding HTML :
Add the .html file in the project folder and give it the name as - index.html.
3) Copy and Paste HTML code :
copy the following code and paste it in index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social Media Icons</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
</head>
<body>
<h1>FOLLOW US ON SOCIAL MEDIA</h1>
<div class="social-media">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</body>
</html>
4) Adding CSS :
Add the .css file in the project folder and give it the name as - style.css.
5) Copy and Paste CSS code :
copy the following code and paste it in style.css file.
* {
margin: 0;
padding: 0;
}
body {
background: #ffffff;
}
h1 {
font-family: sans-serif;
font-weight: normal;
font-size: 25px;
letter-spacing: 4px;
padding: 200px 0 200px;
color: #555;
text-align: center;
}
.social-media {
display: flex;
justify-content: center;
margin-top: -150px;
}
a {
display: flex;
background: #e3edf7;
height: 75px;
width: 75px;
margin: 0 15px;
border-radius: 8px;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
-6px -6px 10px -1px rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0);
transition: transform 0.5s;
}
a i {
font-size: 35px;
color: #777;
transition: transform 0.5s;
}
a:hover {
box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
-0.5px -0.5px 0px rgba(255, 255, 255, 1),
0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.01);
transform: translateY(2px);
}
a:hover i {
transform: scale(0.9);
}
a:hover .fa-facebook {
color: #3b5998;
}
a:hover .fa-twitter {
color: #00acee;
}
a:hover .fa-linkedin {
color: #0a66c2;
}
a:hover .fa-github {
color: #161b22;
}
a:hover .fa-youtube {
color: #f00;
}
6) Check the Output :
After adding source code to the files, check the output of the project.
Here is the output of social media icons code :
About the code -
In this code, we used html to create a structure of the Social media icons for website using html and css to design its structure. In html file, we've added a icons link to add their structure from cloudflare. And with the help of css, we designed the icons and added the hover effect to add the animation to the icons.
About the project -
In this project, we've created the social media icons for website using html and css. This social media icons are very useful to create a professional website with all features and funtionalities because you've to show your social accounts to the users on your website. This social media are necessary to add on website, so use the given source code to create and add social media icons on website.
Hope this tutorial will help you to create Social media icons for website using html and css easily with source code. if you have any confusion then you can contact with us on our coding community.
Also, checkout our website for more information and join our coding community on telegram to connect with coders.
Tags:
projects