Social Media Icons With Neumorphism effect

Neumorphism is a new trend in UI design. It makes the element look extracted from the background or inset in the background. As it makes the element more realistic, it becomes a new trend and used widely. Also, it is quite easy to implement. All we have to do is just play around with background-color & box-shadow properties of CSS.  Let's make a card with social media icons and has a neomorphic effect and this card appears with on click of a button.

Step: 1

  1. <div class="wrapper center">
  2. <div class="open_button" id="open_button" onclick="displayCard()">
  3. Open
  4. </div>
  5. <div class="card center" id="card">
  6. <div class="icon_div center">
  7. <i class="fab fa-facebook-f"></i>
  8. </div>
  9. <div class="icon_div center">
  10. <i class="fab fa-twitter"></i>
  11. </div>
  12. <div class="icon_div center">
  13. <i class="fab fa-linkedin-in"></i>
  14. </div>
  15. <div class="icon_div center">
  16. <i class="far fa-envelope"></i>
  17. </div>
  18. <div class="closeBtn center" id="closeBtn" onclick="closeCard()">
  19. <i class="fas fa-times"></i>
  20. </div>
  21. </div>
  22. </div>
  23. <!-- for fontawesome kit -->
  24. <script src="https://kit.fontawesome.com/12145d2631.js" crossorigin="anonymous"></script>

Start with adding a div element with  class="container center".  Add a div inside it and give  class="openBtn " ,  id="openBtn" andonclick="displayCard()". Then add a text for the button. Add another div with class  class="card center" and id="card".  Inside this, add four div elements with class="icon_div center" for four different social media icons and another div with class="closeBtn" , id="closeBtn". and onclick="closeCard()". Now add icons for Facebook, Twitter, Linkedin and Mail in the first four div elements and times icon in last div.  The times We have used FontAwesome 6 icons. To use icons of FontAwesome add fontawesome kit in your code.

Note: We will right onclick function later on.  

Step: 2 

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. .container {
  7. width: 100%;
  8. height: 100vh;
  9. background: #e0e0e0;
  10. }
  11. .center {
  12. display: flex;
  13. align-items: center;
  14. justify-content: center;
  15. }

In the CSS file first remove margin and padding by using universal selector ( * ) and add box-sizing: border-box. After that give full height and width to .container. Now center all the elements with center class by flex property. Give display: flex and then align all the elements inside .center class to center horizontally and vertically. 

Style the  Button

  1. .openBtn {
  2. padding: 10px 20px;
  3. border-radius: 10px;
  4. border: 2px solid #1c4cce;
  5. color: #aaaaaa;
  6. font-size: 30px;
  7. font-weight: bold;
  8. cursor: pointer;
  9. }
  10. .openBtn:hover {
  11. color: #ffffff;
  12. background-color: #1c4cce;
  13. }

Step: 3 Card with neumorphism effect

  1. .card {
  2. position: relative;
  3. justify-content: space-around;
  4. height: 220px;
  5. width: 600px;
  6. border: none;
  7. border-radius: 20px;
  8. box-shadow: 5px 5px 10px #aaaaaa,
  9. -5px -5px 10px #ffffff;
  10. }

Give position: relative to .card so that the elements inside this can be positioned relatively and justify-content: space_around for some space between them. 

The main part is the box-shadow property. Give two box-shadow property two times, one for dark shadow and the other for light shadow with negative values. This makes the card appear above the surface. Make sure to give light shadow on one side and dark on the other side for nuemorphic effect. 


Step: 4 Style the icons

  1. /* for social media icons */
  2. .icon_div {
  3. height: 80px;
  4. width: 80px;
  5. border-radius: 20px;
  6. box-shadow: inset 8px 8px 16px #cecece, inset -8px -8px 16px #f2f2f2;
  7. }
  8. .icon_div:hover {
  9. box-shadow: 5px 5px 10px #aaaaaa, -5px -5px 10px #ffffff;
  10. }
  11. .icon_div i {
  12. transition: all .1s ease;
  13. }
  14. .icon_div:hover i {
  15. font-size: xx-large;
  16. color: rgb(26, 63, 224);
  17. }
  18. /* for closeBtn */
  19. .closeBtn {
  20. height: 40px;
  21. width: 40px;
  22. position: absolute;
  23. top: 9px;
  24. right: 9px;
  25. border-radius: 10px;
  26. box-shadow: 5px 5px 10px #aaaaaa,
  27. -5px -5px 10px #ffffff;
  28. }
  29. .closeBtn:hover {
  30. box-shadow: inset 3px 3px 6px #bebebe,
  31. inset -3px -3px 6px #ffffff;
  32. }
  33. .closeBtn:hover i {
  34. font-size: x-large;
  35. color: rgb(26, 63, 224);
  36. }

( 1) Social Media Icons - Now it's time to style elements inside the card. First, give the same height and width to .icon_div to make it square and border-radius to curve the corners. Now comes the important thing i.e box-shadow property. To make.icon_div look inserted in the surface add an inset keyword at the start of a value of box-shadow property and give two shadows i.e light and dark.

To further customize the div change the box-shadow property on hover over the div. Also the size and color of icon changes on hover.

(2) CloseBtn - Give height and width to .closeBtn

element and the absolute value of 9px from top-right. Box-shadow property is similar to that of card and changes this on hover. Icon size and color also changes on hover.

Step: 5  onclick function

  1. /* Add inn css */
  2. .card{
  3. display: none;
  4. }

  1. <!-- Add in html -->
  2. <script>
  3. function displayCard() {
  4. document.getElementById("card").style.display = "flex";
  5. document.getElementById('openBtn').style.display = "none";
  6. };
  7. function removeCard() {
  8. document.getElementById("card").style.display = "none";
  9. document.getElementById('openBtn').style.display = "block";
  10. };
  11. </script>

First add a CSS property display: none to .card. Here we have to write functions to display and remove card on click. On displayCard function call display property of .cardchange to flex and card appears and display property of .openBtn change to none consequently openBtn disappears. Similarly, on removeCard function call display property of .cardchange to none and card disappears and display the property of .openBtn change to block.



Click on banner below to Learn: PHP with Laravel for beginners - Become a Master in Laravel

About Sachin Kumar

I am Sachin Kumar. I am a freelancer who works in front-end and Flutter. Here at flowkl.com, I write about CSS animations and beautiful UI & UX in Flutter. You can contact me at sachin@flowkl.com

Related Articles

With the expanding market of mobile apps, the developers are struggling to maintain the code bases for Native apps. M...
5 Elite and Imperative Hybrid App Frameworks
Django is a great framework in python. But all of the hosting do not provide django hosting in their shared or free h...
Cheap Django Hosting
Laravel provides blade template. Blade files are similar to php files and cover all features of php files. In additio...
Blade Template in Laravel 7

Full-Stack Web Development with React

Best Udemy Courses

Top Posts

Recent Posts

The Complete Web Developer Course - Build 25 Websites

Subscribe

Subscribe now and get weekly updates directly in your inbox!

Any Course on Udemy in $6 (INR 455)

Development Category (English)300x250

PHP with Laravel for beginners - Become a Master in Laravel