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

<div class="wrapper center">
    <div class="open_button" id="open_button" onclick="displayCard()">
      Open
    </div>
    <div class="card center" id="card">
      <div class="icon_div center">
        <i class="fab fa-facebook-f"></i>
      </div>
      <div class="icon_div center">
        <i class="fab fa-twitter"></i>
      </div>
      <div class="icon_div center">
        <i class="fab fa-linkedin-in"></i>
      </div>
      <div class="icon_div center">
        <i class="far fa-envelope"></i>
      </div>
      <div class="closeBtn center" id="closeBtn" onclick="closeCard()">
        <i class="fas fa-times"></i>
      </div>
    </div>
  </div>

  <!-- for fontawesome kit -->
 <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 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: 100vh;
    background: #e0e0e0;
}
.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.openBtn {
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid #1c4cce;
    color: #aaaaaa;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.openBtn:hover {
    color: #ffffff;
    background-color: #1c4cce;
}

Step: 3 Card with neumorphism effect

.card {
      position: relative;
      justify-content: space-around;
      height: 220px;
      width: 600px;
      border: none;
      border-radius: 20px;
      box-shadow: 5px 5px 10px #aaaaaa,
        -5px -5px 10px #ffffff;
    }

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

/* for social media icons */
.icon_div {
    height: 80px;
    width: 80px;
    border-radius: 20px;
    box-shadow: inset 8px 8px 16px #cecece, inset -8px -8px 16px #f2f2f2;
}

.icon_div:hover {
    box-shadow: 5px 5px 10px #aaaaaa, -5px -5px 10px #ffffff;
}

.icon_div i {
    transition: all .1s ease;
}

.icon_div:hover i {
    font-size: xx-large;
    color: rgb(26, 63, 224);
}

  /* for closeBtn */

    .closeBtn {
      height: 40px;
      width: 40px;
      position: absolute;
      top: 9px;
      right: 9px;
      border-radius: 10px;
      box-shadow: 5px 5px 10px #aaaaaa,
        -5px -5px 10px #ffffff;
    }

    .closeBtn:hover {
      box-shadow: inset 3px 3px 6px #bebebe,
        inset -3px -3px 6px #ffffff;
    }

    .closeBtn:hover i {
      font-size: x-large;
      color: rgb(26, 63, 224);
    }

( 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

/* Add inn css */
.card{
  display: none;
}

<!-- Add in html -->
<script>
    function displayCard() {
      document.getElementById("card").style.display = "flex";
      document.getElementById('openBtn').style.display = "none";
    };

    function removeCard() {
      document.getElementById("card").style.display = "none";
      document.getElementById('openBtn').style.display = "block";
    };
 
  </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.