In this tutorial, I'll show you how to create stylish social media icons using simple HTML and CSS. These icons will be interactive and responsive, making them a perfect addition to any modern website.
Step 1: HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Social Media Icons</title>
<link rel="stylesheet" href="./social-media-icons.css">
<script src="https://kit.fontawesome.com/66aa7c98b3.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="social-menu">
<ul>
<li><a
href="https://github.com/yourprofile" target="blank"><i class="fab
fa-github"></i></a></li>
<li><a
href="https://www.instagram.com/yourprofile/" target="blank"><i
class="fab fa-instagram"></i></a></li>
<li><a
href="https://www.linkedin.com/in/yourprofile/" target="blank"><i
class="fab fa-linkedin-in"></i></a></li>
<li><a
href="https://codepen.io/yourprofile" target="blank"><i class="fab
fa-codepen"></i></a></li>
</ul>
</div>
</body>
</html>
In this code:
-
I use Font Awesome icons, so make sure you include the Font Awesome script
in the
<head>section. -
Each list item (
<li>) contains a link to a social media profile. Thetarget="blank"attribute ensures that the links open in a new tab.
Step 2: CSS
body{
background: #faedcd;
}
.social-menu ul{
position: absolute;
top: 50%;
left: 50%;
padding: 0;
margin: 0;
transform: translate(-50%, -50%);
display: flex;
}
.social-menu ul li{
list-style: none;
margin: 0 15px;
}
.social-menu ul li .fab{
font-size: 30px;
line-height: 60px;
transition: .3s;
color: #000;
}
.social-menu ul li .fab:hover{
color: #fff;
}
.social-menu ul li a{
position: relative;
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
text-align: center;
transition: .6s;
box-shadow: 0 5px 4px rgba(0,0,0,.5);
}
.social-menu ul li a:hover{
transform: translate(0, -10%);
}
.social-menu ul li:nth-child(1) a:hover{
background-color: rgba(0, 0, 0, 0.829);
}
.social-menu ul li:nth-child(2) a:hover{
background-color: #E4405F;
}
.social-menu ul li:nth-child(3) a:hover{
background-color: #0077b5;
}
.social-menu ul li:nth-child(4) a:hover{
background-color: #000;
}
In this Code:
#faedcd)..social-menu ul class uses position: absolute and transform: translate(-50%, -50%) to center the icons on the page..fab class (from Font Awesome) is used to style the icons, with a font size of 30px and a hover effect that changes the icon color to white.Feel free to experiment with the code and make it your own. Happy coding!
