<p>Click a card to change its stacking order.</p>
<div class="button-wrap">
  <div class="button green">Card 1</div>
  <div class="button yellow">Card 2</div>
  <div class="button blue">Card 3</div>
  <div class="button violet">Card 4</div>
</div> 
* {
  transition:.25s ease-in-out;
}

p {
  font-family:helvetica neue, helvetica, arial, sans-serif;
  font-weight:200;
  font-size:20px;
  max-width:500px;
  margin:100px auto 50px auto;
  text-align:center;
  color:#464646;
}

.button-wrap {
  font-family:helvetica neue, helvetica, arial, sans-serif;
  font-weight:200;
  font-size:25px;
  height:75px;
  width:200px;
  margin:50px auto;
  position:relative;
  &:hover {
    .button {
      &:nth-of-type(1){
        transform:translate(-30px,-30px);
      }
      &:nth-of-type(2){
        transform:translate(-10px,-10px);
      }
      &:nth-of-type(3){
        transform:translate(10px,10px);
      }
      &:nth-of-type(4){
        transform:translate(30px,30px);
      }
    }
  }
  .button {
    height:100%;
    width:100%;
    line-height:75px;
    text-align:center;
    position:absolute;
    box-shadow: 2px 2px 2px rgba(0,0,0,.2);
    border-radius:3px;
    &:hover {
      cursor:pointer;
    }
    &.green {
      background:#7fc77e;
      color:#537a52;
      &:hover {
        background:#77e475;
      }
    }
    &.yellow {
      background:#eccc1d;
      color:#887d40;
      &:hover {
        background:#ffe557;
      }
    }
    &.blue {
      background:#6dbde2;
      color:#10678f;
      &:hover {
        background:#8edbff;
      }
    }
    &.violet {
      background:#b578ce;
      color:#3d2049;
      &:hover {
        background:#de8eff;
      }
    }
    &:first-of-type {
      z-index:4;
    }
    &:nth-of-type(2) {
      z-index:3;
      left:5px;
      top:5px;
    }
    &:nth-of-type(3) {
      z-index:2;
      left:10px;
      top:10px;
    }
    &:nth-of-type(4) {
      z-index:1;
      left:15px;
      top:15px;
      box-shadow:none;
    }
  }
}
View Compiled
$('.button').click(function(){
  var clickedButton = $(this);
  this.remove();
  $('.button-wrap').prepend(clickedButton);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js