Neumorphic Control Buttons

index.html

<div class="socials">
  
  <div class="button">
    <span class="icon">
      <i class="fas fa-pause"></i>
    </span>
  </div>
  
  <div class="button">
    <span class="icon">
      <i class="fas fa-backward"></i>
  </div>
  
  <div class="button">
    <span class="icon">
      <i class="fas fa-play"></i>
  </div>
  
  <div class="button">
    <span class="icon">
      <i class="fas fa-forward"></i>
  </div>
  
  <div class="button">
    <span class="icon">
      <i class="fas fa-stop"></i>
  </div>
  
</div>

neumorphic-control-buttons.markdown

Neumorphic Control Buttons

A Pen by Chandrika Deb on CodePen.

License.

style.css

body {
  padding: 300px;
  background: #f2f2f2;
}

.socials {
  display: flex;
  height: 100%;
  justify-content: space-around;
  align-items: center;
}
.button {
  height: 80px;
  width: 80px;
  background-color: #f2f2f2;
  border-radius: 150px;
  box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
}

.button:hover {
  box-shadow: -5px -10px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.5);
}

.button:active {
  transform: translateY(-20px);
}

.button span.icon {
  position: relative;
  display: flex;
  padding: 32px;
  color: gray;
} 

styles

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