Neumorphism Social Media Buttons Using HTML and CSS
I am hoping you are liked techmidpoint tutorial and improving your web development skills. In this tutorial am going to show you CSS neumorphism animated social media Icons using HTML and CSS. When we move the mouse over the social media icons then we can see the change in the behavior it.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Neumorphism Social media Icons</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</body>
</html>
CSS
body
{
margin: 0;
padding: 0;
background: #dedede;
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
}
ul
{
margin: 0;
padding: 0;
}
ul li
{
list-style: none;
display: inline-block;
}
ul li a
{
position: relative;
width: 120px;
height: 120px;
display: block;
text-align: center;
margin: 0 10px;
border-radius: 50%;
padding: 6px;
box-sizing: border-box;
text-decoration: none;
box-shadow: 0 10px 15px rgba(0,0,0,0.3);
background: linear-gradient(0deg, #ddd, #fff);
transition: .5s;
}
ul li a:hover
{
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
ul li a .fa
{
width: 100%;
height: 100%;
display: block;
background: linear-gradient(0deg, #fff, #ddd);
border-radius: 50%;
line-height: calc(120px - 12px);
font-size: 40px;
color: #262626;
transition: .5s;
}
ul li:nth-child(1) a:hover .fa
{
color: #3b5999;
}
ul li:nth-child(2) a:hover .fa
{
color: #55acee;
}
ul li:nth-child(3) a:hover .fa
{
color: #dd4b39;
}
ul li:nth-child(4) a:hover .fa
{
color: #0077B5;
}
ul li:nth-child(5) a:hover .fa
{
color: #e4405f;
}
