<head>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>

<body>
  <h1>Neumorphic Social Share Buttons</h1>
  <div class ="frame">
    <a href="#" class="btn">
 <i class="fab fa-facebook-f" style="color: #3b5998;"></i>
</a>
    <a href="#" class="btn">
  <i class="fab fa-twitter" style="color: #00acee;"></i>
</a>
    <a href="#" class="btn">
 <i class="fab fa-dribbble" style="color: #ea4c89;"></i>
</a>
    <a href="#" class="btn">
 <i class="fab fa-linkedin-in" style="color:#0e76a8;"></i>
</a>
    <a href="#" class="btn">
 <i class="fab fa-get-pocket" style="color:#ee4056;"></i>
</a>
    <a href="#" class="btn">
 <i class="far fa-envelope"></i>
</a>
</div>
</body>
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: -8px;
   background: #e0e5ec;
}

h1 {
  position: relative;
  text-align: center;
  color: #353535;
  font-family: "Cormorant Garamond", serif;
  bottom: 30px;
}
h1:before{
  position: absolute;
  content: "";
  bottom: -10px;
  width: 100%;
  height: 2px;
  background-color: orange;
}

.frame{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  width: 350px;
  position: relative;
   box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001,
   inset 0px 0px 0px 0px #fff9,
   inset 0px 0px 0px 0px #0001,
   inset 0px 0px 0px 0px #fff9,        inset 0px 0px 0px 0px #0001;
 transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
   border-radius: 10px;
}

.btn{
  height: 35px;
  width: 35px;
  border-radius: 3px;
  background: #e0e5ec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001,
   inset 0px 0px 0px 0px #fff9,
   inset 0px 0px 0px 0px #0001,
   inset 0px 0px 0px 0px #fff9,        inset 0px 0px 0px 0px #0001;
 transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
  font-size: 16px;
  color: rgba(42, 52, 84, 1);
  text-decoration: none;
}
.btn:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.