<div class="container">
  <div class="neumorphism"></div>
</div>

body {
  background-color: #e8e8e8;
  height: 300px;
  position: relative;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.neumorphism {
  width:200px;
  height: 100px;
  transition: .2s all;
  border-radius: 20px;
  background: #e8e8e8;
  box-shadow:  15px 15px 30px #bebebe, 
               -15px -15px 30px #ffffff;
  cursor: pointer;
}

.neumorphism:hover {
  box-shadow:  5px 5px 15px #bebebe, 
               -5px -5px 15px #ffffff;
}

.neumorphism:active {
  background: #e8e8e8;
  box-shadow: inset 3px 3px 8px #bebebe, 
              inset -3px -3px 8px #ffffff;
}