Neumorphism !!!
Best Thing to implement in Button or Logo or in any kind of images or box shape available in website.
HTML Code:
<!DOCTYPE?html
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Neuomorphism?-?Ranjit</title>
????<link?rel="stylesheet"?href="style.css">
????<link?rel="stylesheet"??/>
</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-whatsapp"></i></a>
????????<a?href=""><i?class="fab?fa-instagram"></i></a>
????????<a?href=""><i?class="fab?fa-youtube"></i></a>
????</div>
</body>
</html>>
CSS Code:
"Added Simple but cool Animation"
*
????margin:?0;
????padding:?0;
}
body{
????background:?#e3edf7;
}
h1{
????font-family:?sans-serif;
????font-weight:?normal;
????letter-spacing:?4px;
????text-align:?center;
????font-size:?25px;
????padding:?200px?0?100px;
????color:?#555;
}
.social-media{
????display:?flex;
????justify-content:?center;
}
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);
????transition:?transform?0.55s;
}
a?i{
????font-size:?35px;
????color:?#777;
????transition:?tranform?0.55s;
}
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);
????transform:?translateY(2px);
}
a:hover?i{
????transform:?scale(0.90);
}
a:hover?.fa-facebook{
????color:?#3b5998;
}
a:hover?.fa-whatsapp{
????color:?green;
}
a:hover?.fa-twitter{
????color:?blue;
}
a:hover?.fa-instagram{
????color:?red;
}
a:hover?.fa-youtube{
????color:?red;
}
{
Let's see the result:
Thank You