Hello Guys, In this article or video we will see Amazing Neumorphism Social Media Icons Using Only HTML & CSS. You will use this Amazing Neumorphism Social Media Icons on your website freely. If you learn How to create this Amazing Neumorphism Social Media Icons so watch my video from YouTube or bellow. And you wish to learn more amazing HTML, CSS and JavaScript Effect or Tutorial so Subscribe my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
First add this code on index.html file:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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" type="text/css" href="style.css">
<title>Amazing Neumorphism Social Media Icons - Pure Coding</title>
</head>
<body>
<div class="wrapper">
<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-github"></i></a></li>
<li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
</ul>
</div>
</body>
</html>
Then add this code on style.css file:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;
0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;
1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
:root {
--bg: #EFEEEE;
--light-shadow: #FFF;
--dark-shadow: rgba(13, 39, 80, .16);
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg);
}
.wrapper ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper ul li {
margin: 0 20px;
}
.wrapper ul li a {
background: var(--bg);
text-decoration: none;
position: relative;
width: 60px;
height: 60px;
display: block;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 5px 5px 10px var(--dark-shadow),
-5px -5px 10px var(--light-shadow);
}
.wrapper ul li a:focus {
box-shadow: inset 5px 5px 10px var(--dark-shadow),
inset -5px -5px 10px var(--light-shadow);
}
.wrapper ul li a i {
font-size: 1.3rem;
}
.wrapper ul li a i.fa-facebook {
color: #4267B2;
}
.wrapper ul li a i.fa-twitter {
color: #1DA1F2;
}
.wrapper ul li a i.fa-github {
color: #24292e;
}
.wrapper ul li a i.fa-youtube-play {
color: #FF0000;
}
