CodePen

HTML

            
              <ul>
  <li><i class="fontawesome-heart"></i></li>
  <li><i class="fontawesome-tint"></i></li>
  <li><i class="fontawesome-star"></i></li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              *, *:after, *:before {
  box-sizing: border-box;
}

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

body {
  background: #e3e3e3;
}

ul {
  text-align: center;
  position: relative;
  margin: 50px auto;
  
}

ul:after {
  background: #f2f2f2;
  z-index: -2;
  height: 100%;
  top: -50%;
  width: 100%;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  box-shadow: 0 3px 2px rgba(0,0,0,0.08);
  background:
linear-gradient(63deg, #f8f8f8 5px, transparent 5px) 0 5px,
linear-gradient(243deg, #f8f8f8 5px, transparent 5px) 10px 0px,
linear-gradient(63deg, #f0f0f0 5px, transparent 5px) 0px 10px,
linear-gradient(243deg, #f0f0f0 5px, transparent 5px) 10px 5px,
linear-gradient(0deg, #f6f6f6 10px, transparent 10px),
linear-gradient(#f2f2f2 25%, #f3f3f3 25%, #f3f3f3 50%, transparent 50%, transparent 75%, #f4f4f4 75%, #f4f4f4);
background-color: #f2f2f2;
background-size: 20px 20px; 
}

li {
  display: inline-block;
  cursor: pointer;
  font-size: 50px;
  line-height: 100px;
  width: 100px;
  height: 100px;
  line-height: 105px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease-out;
  margin: 20px;
  border-radius: 50%;
  text-shadow: 0 -2px 1px rgba(0,0,0,0.25);
  background: linear-gradient(#fefefe, #ebebeb);
  box-shadow: 
    0 15px 15px rgba(0,0,0,0.08),
    0 5px 5px rgba(0,0,0,0.075),
    0 0 5px rgba(0,0,0,0.2),
    inset 0 2px 2px rgba(255,255,255,1),
    inset 0 -2px 2px rgba(0,0,0,0.1);
}

li i {
  display: block;
}

li:active {
  box-shadow: 
    0 5px 5px rgba(0,0,0,0.075),
    0 0 5px rgba(0,0,0,0.2),
    inset 0 2px 2px rgba(255,255,255,1),
    inset 0 -2px 2px rgba(0,0,0,0.1);
}

li:after {
  z-index: -1;
  content: "";
  background: #e3e3e3;
  position: absolute;
  top: -12px;
  left: -12px;
  bottom: -12px;
  right: -12px;
  border-radius: inherit;
  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
}

li:nth-child(1) { 
  color: #efb3b3; 
  text-shadow: 0 -2px 2px #c2908f;
}

li:nth-child(2) { 
  color: #a7e0f1; 
  text-shadow: 0 -2px 2px #8fc4d2;
}

li:nth-child(3) { 
  color: #f9db92;
  text-shadow: 0 -2px 2px #d2b57b;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................