Welcome Guys, In this article I will be sharing Social media buttons with Neumorphic Effect using HTML & CSS only. Using Pure CSS Neumorphic Social Media Buttons design makes the element more clear and attractive. There are many different types of sharing buttons made using pure CSS, So In this article let's use Neumorphism design social media buttons snippet source code in the website.
Visitors love to see animated hover effects on Social media buttons, don't you like? peoples are more attracted to creative design so use social media icons Neumorphic design using HTML & CSS on your website.
Not getting what I am talking about? and Don't have any idea or knowledge of Neumorphism design? Well, I am here to explain it.
Before knowing Social media buttons using HTML & CSS and Neumorphic Social Media Buttons source code in your website, let me provide a simple summary about it.
Want more CSS designs? Check out our responsive tabs on the blogger website using CSS
What is Neumorphism design?
Like any other CSS button design, Neumorphism is like focusing on shadows, gradients, border, Zoom-in, Zoom-out, and hover effects on social media buttons using CSS. It highlights buttons more clearly and some sort of 3D design effect. It is easy to design and understand all CSS transform effects using HTML and CSS.
Well, It will be good to check the demo of CSS3 Neumorphic Social Media Buttons from below. Now let me provide a complete source code that can be used on any website.
CSS Neumorphic social Media Buttons [Source Codes]
To create Neumorphism Effect on Social Media Icons, you can copy Neumorphic social Share Buttons HTML and CSS code from the below code section. Copy from below and add it to your HTML file of the website.
You can add or replace<a href=”#”> tag inside each button to redirect the user to your social network site/account on a button click. Scroll download for source codes and these Social Media Buttons in your HTML pages, websites, and projects.
You may also like the 404 error page HTML template download
Neumorphic Style Hover Effect on Social Media Icons
Instead of separate CSS and HTML code, I added them in a single HTML file, therefore copy-paste below social media button HTML CSS code.
<!-- If your website already using font-awesome then no need to use again remove below cdn-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<!-- Style design 1 -->
<style>
@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;
}
</style>
<!-- html design 1 by Technical Arp-->
<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>
Want to see some more Neumorphic social media button design CSS code, then check next.
Social Media Buttons using HTML & CSS only
Simple with the different color format on Neumorphism Effect on Social Media Icons as backgrounds also designed in neumorphism style.
Do you want to add more buttons like download button HTML code for blogger
<!-- If your website already using font-awesome then no need to use again remove below cdn-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Style design 2 by Technical Arp -->
<style>
@import url(https://fonts.googleapis.com/css?family=Calibri:400,300,700);
body {
text-align: center;
font-family: 'Calibri', sans-serif !important;
background-color: #55b9f3
}
.social-buttons {
margin-top: 200px
}
.social-buttons button {
margin-right: 10px
}
.neo-button {
width: 70px;
height: 70px;
cursor: pointer;
border: none;
outline: none;
border-radius: 11px;
background: linear-gradient(145deg, #5bc6ff, #4da7db);
box-shadow: 6px 6px 13px #489dcf, -6px -6px 13px #62d5ff
}
.neo-button:hover {
width: 70px;
height: 70px;
border: none;
outline: none;
border-radius: 11px;
background: linear-gradient(145deg, #4da7db, #5bc6ff);
box-shadow: inset 6px 6px 13px #489dcf, inset -6px -6px 13px #62d5ff
}
.neo-button .fa {
color: #eee
}
</style>
<!-- html design 2 -->
<div class="social-buttons"> <button class="neo-button"><i class="fa fa-facebook fa-2x"></i> </button> <button class="neo-button"><i class="fa fa-linkedin fa-2x"></i> </button> <button class="neo-button"><i class="fa fa-google fa-2x"></i> </button> <button class="neo-button"><i class="fa fa-dribbble fa-2x"></i> </button> <button class="neo-button"><i class="fa fa-twitter fa-2x"></i> </button> </div>
Animation shadow effect buttons code
Buttons using CSS can be designed in many ways, If you know CSS and Html then you can use your creativity and customize it. Just look at's demo those icons' hover effect is amazing, the button got pressed which looks really very awesome.
Image - Neumorphic Social Media Buttons
Demo - Codepen by Shubham Click here.
Bonus - You may also like Social Media Icons design using pure CSS - Codepen by Akshay Click here.
If you like this Neumorphsim UI Design and then Please do share it with your friends.
Next, Want to increase website speed know about Minify CSS and JavaScript in Blogger
Now time for a conclusion.
In conclusion Neumorphic Social Media Buttons Using HTML & CSS
I hope you have understood the what is Neumorphic effect is and how it is applied on social media icons using HTML and CSS only. If you’re a beginner and you have basic knowledge of HTML & CSS only then also try to create this type of Neumorphic Effect on Buttons, Social Media Icons, and more.
If you have any difficulty or want more such CSS design then please comment down.
See you in a new blog post.
We are providing you with many amazing scripts and tutorials for free, So please follow us on YouTube Channel to get all updates and more useful content.
Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.
Read more:
Add Table of Content in Blogger
YouTube video downloader script
Love calculator script for blogger
Decimal to Binary Converter Tool
ConversionConversion EmoticonEmoticon