As you all know Social Icons: Social Icons represents a small site linked to your social media accounts, in any widget area of your profile. After adding links to your social profiles, social icons are helped displayed on your site, letting your users connect with you via your chosen networks.
As you can see in the article, this is a stylish Social Media icon that is created only HTML & CSS.HTML CODE:
<!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">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/
font-awesome.min.css" />
<link rel="stylesheet" href="style.css">
<title>Social icons</title>
</head>
<body>
<ul class="social-icons">
<li>
<a href="#" target="_blank" rel="noopener noreferrer">
<i class="fa fa-instagram"></i></a>
</li>
<li> <a href="#" target="_blank" rel="noopener noreferrer">
<i class="fa fa-whatsapp"></i></a></li>
<li> <a href="#" target="_blank" rel="noopener noreferrer">
<i class="fa fa-snapchat"></i></a></li>
<li> <a href="#" target="_blank" rel="noopener noreferrer">
<i class="fa fa-telegram"></i></a></li>
</ul>
</body>
</html>
body {
background-color: #111827;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.social-icons {
display: flex;
justify-content: center;
list-style: none;
}
.social-icons li {
margin: 0 10px;
}
.social-icons li a {
font-size: 30px;
height: 70px;
width: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
position: relative;
transition: 0.5s ease;
}
.social-icons li a:hover {
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
background-clip: text;
color: transparent;
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;
font-size: 40px;
}
.social-icons li a::before{
content:"";
position:absolute;
z-index: -1;
height: 70px;
width: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: scale(1);
transition: 0.5s ease-in-out;
}
.social-icons li a:hover::before{
transform: scale(0);
}
Tags
Social Media Icon