Table of Contents
Social Media Icons HTML and CSS | Hover Icons Animation – Codewithrandom
Welcome🎉 to Code With Random blog. We learn how to create Social Media Icons in HTML and CSS. We use HTML & CSS for Social Media Icons We Hope you enjoy our blog so let’s start with a basic HTML structure for Social Media Icons.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Socail Media Icon</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="social-menu">
<ul>
<li><a href="#" target="blank"><i class="fab fa-github"></i></i></a></li>
<li><a href="#" target="blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="#" target="blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fab fa-codepen" target="blank"></i></a></li>
</ul>
</div>
<script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
</body>
</html>
There is all HTML code for the Social Media Icons. Now, you can see output without CSS, then we write CSS for the Social Media Icons.
CSS code
body{
background: #d8d8d8;
}
.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;
}
Invece di:
.social-menu ul li .fab:hover{
color: #fff;
}
andrebbe messo:
.social-menu ul li:hover .fab{
color: #fff;
}