<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
  <title>Document</title>
</head>
<body>
    <div class="up">Hover over Me!</div>
    <div class="down">Hover over Me!</div>
</body>
</html>
@import "compass/css3";

$bg-color: #f39c12;
$ft-color: #e5e5e5;
$bt-color: #e74c3c;
$bt-shadow: #c0392b;
$bg-shadow: #e67e22;


body {
  background: $bg-color;
  font-family: 'Oswald', sans-serif;
  text-align: center;
}
  
div {
  font-size: 28px;
  color: $ft-color;
  position: relative;
  display: inline-block;
  width: 200px;
  top: 130px;
  padding: 15px;
  margin: 0 15px; 
  background: $bt-color;
  cursor: pointer;
}

.up {
  -webkit-box-shadow: 1px 1px 0 $bt-shadow,
                      2px 2px 0 $bt-shadow,
                      3px 3px 0 $bt-shadow,
                      4px 4px 0 $bt-shadow,
                      5px 5px 0 $bt-shadow;
  -webkit-transition: all 0.1s linear;
  
  &:hover{
    -webkit-box-shadow: 1px 1px 0 $bt-shadow,
                        2px 2px 0 $bt-shadow,
                        3px 3px 0 $bt-shadow,
                        4px 4px 0 $bt-shadow,
                        5px 5px 0 $bt-shadow,
                        6px 6px 0 $bt-shadow,
                        7px 7px 0 $bt-shadow,
                        8px 8px 0 $bt-shadow,
                        8px 8px 0 $bt-shadow,
                        9px 9px 0 $bt-shadow,
                        10px 10px 0 $bt-shadow;
    -webkit-transform: translate3d(-5px,-5px,-5px);    
  }
}

.down {
  -webkit-box-shadow: 1px 1px 0 $bt-shadow,
                      2px 2px 0 $bt-shadow,
                      3px 3px 0 $bt-shadow,
                      4px 4px 0 $bt-shadow,
                      5px 5px 0 $bt-shadow;
  
  -webkit-transition: all 0.1s linear;
  
  &:hover{
    -webkit-box-shadow: -1px -1px 0 $bg-shadow,
    -2px -2px 0 $bg-shadow,
    -3px -3px 0 $bg-shadow;
    
    -webkit-transform: translate3d(3px,3px,3px);    
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.