Hello readers, today in this blog we are going to design a Neumorphism Effect on Social Media Icons by using only HTML & CSS. In the earlier blog, I have shared a program of How to Create an Animated Share Button and now I’m going to create a social media button with a neumorphism style.
In simple language, neumorphism means a UI design style mainly of white color and it looks very soft and plastic. This neumorphism design look vacuum and really catchy for the eyes. Neumorphism design can be used in any program like login form, share button, profile card, and others.
As you can see on the given image of this program [Neumorphism Effect on Social Media Icons], on the webpage. There are famous social media (Facebook, Twitter, Instagram, and youtube) with the neumorphism effect, as you can clearly look on these media button some icon looks like they are popped and some are looks like they have pressed. Literally, I have made an effect by using CSS box-shadow. All social media color is original, which are given by their creator. Let’s talk about this program. In the first, all of them are pop-up ed and when we hover them they got pressed in the neumorphism style.
If you are feeling difficulty to understand this program. Don’t worry my friend, I have provided a full video tutorial about this program [Neumorphism Effect on Social Media Icons]. Please watch this full video. I hope after watching this video, all your confusion will clear.
Video Tutorial Neumorphism Effect on Social Media Icons CSS
As you saw in the full video of Neumorphism Effect on Social Media Icons. All backgrounds designed in neumorphism style. When those icons hover, the button got pressed which looks really very awesome. I have made this program[Neumorphism Effect on Social Media Icons ] with the help of HTML & CSS only.
If you are familiar with HTML & CSS you can make this video easily and also if you have knowledge about JavaScript you can add more functionality as you like. Those my friends who are feeling difficult to create this program [ Neumorphism Effect on Social Media Icons], don’t worry I have provided all source codes of this program. This is free and all of you can use this program for your purposes.
You Might Like This:
Hover Effect o Social Media Icons [Source Codes]
To paste the given codes of this program [Neumorphism Effect on Social Media Icons] into your computer, first of all, you need to create two files, one is an HTML file and another is the CSS file. After creating these two files you can copy-paste the given codes of this program easily. If you want to download all source code files directly from the “Download Button”.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter up Animation on Scroll | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
</head>
<body>
<div class="icons">
<a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="insta"><i class="fab fa-instagram"></i></a>
<a href="#" class="git"><i class="fab fa-github"></i></a>
<a href="#" class="yt"><i class="fab fa-youtube"></i></a>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #ecf0f3;
}
.icons a{
background: #ecf0f3;
position: relative;
height: 60px;
width: 60px;
margin: 0 10px;
display: inline-flex;
text-decoration: none;
border-radius: 50%;
transition: all 0.3s;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
}
.icons a:hover:before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background: #ecf0f3;
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
}
.icons a i{
position: relative;
z-index: 3;
text-align: center;
width: 100%;
height: 100%;
font-size: 25px;
line-height: 60px;
}
.icons a:hover i{
transform: scale(0.9);
}
.icons a.fb i{
color: #4267B2;
}
.icons a.twitter i{
color: #1DA1F2;
}
.icons a.insta i{
color: #E1306C;
}
.icons a.git i{
color: #333;
}
.icons a.yt i{
color: #ff0000;
}
