A highly playful twist on traditional standard buttons. By using stacked box-shadow values, we can simulate the 3D depth of physical plastic beads on a friendship bracelet!

Beaded Box Shadows

.bracelet-btn {
  background: #fdf2f8;
  border-radius: 30px;
  border: none;
  font-weight: bold;
  /* Multiple shadows create the 3D ridges */
  box-shadow: 
    inset 0 4px 0 rgba(255,255,255,0.7),
    0 4px 0 #db2777,
    0 8px 15px rgba(219,39,119,0.3);
  transition: 0.1s;
}

.bracelet-btn:active {
  transform: translateY(4px);
  box-shadow: 
    inset 0 4px 0 rgba(255,255,255,0.7),
    0 0 0 #db2777;
}

Play with the satisfying tactile click mechanisms in the Live Demo!