Neomorphism UI Design in CSS | Social Media Icons Design using HTML and CSS
Hello Viewers, today in this post, you’ll learn how to create Social Media Icons Design using HTML and CSS.
The Social links enables your website visitors to easily share your content with their social media connections and networks.
To create this project (Neumorphism Social Media Icons). First, you need to create two Files one HTML File and another one is CSS File.
First, create an HTML file with the name of index.html and paste the given code in your HTML file.
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<h2 class="title">Neomorphism Social media buttons</h2>
<ul class="socail-media-list">
<li class="social__item"><a href="javascript:void(0)" class="social__link" rel="noopener"><i class="fa fa-facebook-f"></i></a></li>
<li class="social__item"><a href="javascript:void(0)" class="social__link" rel="noopener"><i class="fa fa-linkedin"></i></a></li>
<li class="social__item"><a href="javascript:void(0)" class="social__link" rel="noopener"><i class="fa fa-instagram"></i></a></li>
<li class="social__item"><a href="javascript:void(0)" class="social__link" rel="noopener"><i class="fa fa-twitter"></i></a></li>
</ul>
Second, create a CSS file with the name of style.css and paste the given code in your CSS file.
body {
font-family: "Roboto", sans-serif;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: center;
align-items: center;
background: #e8e8e8;
}
.title {
font-size: 32px;
font-weight: 300;
margin-bottom: 50px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
}
.socail-media-list {
display: flex;
}
.socail-media-list .social__item {
margin: 30px;
}
.socail-media-list .social__item .social__link {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #e8e8e8;
border: 1px solid rgba(255, 255, 255, 0.5);
transition: all 0.3s linear;
box-shadow: 7px 7px 15px #bbcfda, -4px -4px 13px #ffffff, inset 4px 4px 8px rgba(209, 217, 230, 0.35), inset -8px -8px 8px rgba(255, 255, 255, 0.3);
}
.socail-media-list .social__item .social__link:hover {
box-shadow: 4px 2px 18px #bbcfda, -4px -4px 13px #ffffff, inset 6px 6px 16px rgba(209, 217, 230, 0.8), inset -8px -8px 8px rgba(255, 255, 255, 0.2);
transform: translateY(2px);
}
.socail-media-list .social__item .social__link i {
font-size: 32px;
color: #6f6f6f;
}
That’s all in this post, you’ve successfully created Neomorphic Social Media Icons. If your code does not work or you’ve faced any problem then comment down your problem.
If you’re feeling difficult to understand what I am saying in this post. You can watch a full video tutorial on this project(Neumorphic Social Media Buttons).