Hello readers, Today in this blog you’ll learn how to create Neumorphic Social Media Buttons using HTML & CSS only. Earlier I have shared a CSS3 Neumorphism Login Form Design. Now it’s time to create Neumorphic Social Media Buttons.
The Social links and buttons enable your website visitors and content viewers to easily share your content with their social media connections and networks.
Today in this blog, I’ll share with you a Neomorphic Social Media Buttons. These Social Media Buttons are created only for design purposes. There is no action and it won’t redirect you to any other sites when you triggered on those buttons.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (CSS3 Neumorphic Social Media Buttons).
Video Tutorial of Neumorphic Social Media Buttons
I hope you have understood the basic codes of this Neumorphic effect. There are no vast codes, there are creative role box-shadows only. If you’re a beginner and you have little knowledge of HTML & CSS only then you can also create this type of Neumorphic Effect on Buttons, Social Media Icons, Cards, etc. You can add the link of your social site inside the href attribute of <a> anchor tag if you want to redirect users or viewers when they click on the specific button.
If you like this Neumorphsim UI Design and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
Neomorphic Social Media Icons [Source Codes]
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS3 - Neumorphic Social Icons</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="center">
<div class="icons first">
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
<li><a href="#"><span class="fab fa-linkedin-in"></span></a></li>
<li><a href="#"><span class="fab fa-github"></span></a></li>
</div>
<div class="icons second">
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
<li><a href="#"><span class="fab fa-linkedin-in"></span></a></li>
<li><a href="#"><span class="fab fa-github"></span></a></li>
</div>
</div>
<script>
$('.first li').click(function(){
$(this).toggleClass("shadow-1").siblings();
$(this).toggleClass("fill-color").siblings();
});
$('.second li').click(function(){
$(this).toggleClass("shadow-2").siblings();
$(this).toggleClass("fill-color").siblings();
});
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
background: #dde1e7;
width: 100%;
}
.icons{
display: flex;
margin: 40px 0;
}
li{
position: relative;
list-style: none;
height: 70px;
width: 70px;
margin: 0 10px;
border-radius: 50%;
background: #dde1e7;
cursor: pointer;
box-shadow: -3px -3px 7px #ffffff73,
3px 3px 5px rgba(94,104,121,0.288);
}
li a{
line-height: 70px;
font-size: 27px;
color: #b6bbc5;
}
.first li.shadow-1{
box-shadow: inset -3px -3px 7px #ffffff73,
inset 3px 3px 5px rgba(94,104,121,0.288);
}
.first li.shadow-1 a{
font-size: 25px;
}
.second li.shadow-2 a{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 55px;
width: 55px;
line-height: 55px;
border-radius: 50%;
background: #dde1e7;
font-size: 24px;
box-shadow: inset -3px -3px 7px #ffffff73,
inset 3px 3px 5px rgba(94,104,121,0.288);
}
li:nth-child(1).fill-color a{
color: #4267B2;
}
li:nth-child(2).fill-color a{
color: #1DA1F2;
}
li:nth-child(3).fill-color a{
color: #E1306C;
}
li:nth-child(4).fill-color a{
color: #2867B2;
}
li:nth-child(5).fill-color a{
color: #333;
}
That’s all, now you’ve successfully created CSS3 Neomorphic Social Media Buttons. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Thank you 🙂
Wow!