CodePen

HTML

            
              <div id="container">
  <p>Click the buttons on different points (top, right, center...) Chrome and Firefox</p>
  <div class="button">
    <a href="#">
      <span>Illustrator</span>
      <img src="http://welcome.timepad.ru/img/ai_icon.png" alt="Illustrator" />
    </a>
  </div>
    	
  <div class="button">
    <a href="#">
      <span>Photoshop</span>
      <img src="http://collegiateathleticsmedia.files.wordpress.com/2011/04/ps-svg.png?w=44&h=44" alt="Photoshop" />
    </a>
  </div>
			
  <div class="button">
    <a href="#">
      <span>Dreamweaver</span>
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Adobe_Dreamweaver_CS5_Icon.png/44px-Adobe_Dreamweaver_CS5_Icon.png" alt="Dreamweaver" />
    </a>
  </div>
  
</div>
            
          
!
via HTML Inspector

CSS

            
              body { background: #001940; font-family: Verdana; font-size: 11px; color: #fff; }
#container { width: 260px; margin: 20px auto; }
.button {
  position: relative;
  float: left;
	height: 122px;
	width: 122px;
	margin: 4px;
	-webkit-perspective: 120px;
	-moz-perspective: 120px;
	-o-perspective: 120px;
	-ms-perspective: 120px;
	perspective: 120px;
}
	.button a {
		float: left;
		width: 120px;
		height: 120px;
		text-align: center;
		position: absolute;
		text-decoration: none;
		color: #fff;
		border: 1px solid #1a50a4;
		background-color: #00388f;
		
		background-image: -moz-linear-gradient(left, #003280, #003d9d); /* FF3.6 */
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #003280), color-stop(1, #003d9d)); /* Safari 4+, Chrome 2+ */
		background-image: -webkit-linear-gradient(left, #003280, #003d9d); /* Safari 5.1+, Chrome 10+ */
		background-image: -o-linear-gradient(left, #003280, #003d9d); /* Opera 11.1+ */
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#003280', endColorstr='#003d9d'); /* IE6,IE7 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#003280', endColorstr='#003d9d')"; /* IE8+ */
		background-image: linear-gradient(to right, #003280, #003d9d);
		
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-o-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transition: all linear .1s;
		-moz-transition: all linear .1s;
		-o-transition: all linear .1s;
		-ms-transition: all linear .1s;
		transition: all linear .1s;
	}
	.button a:hover {
		-webkit-box-shadow: #213759 0 0 0 3px;
		-moz-box-shadow: #213759 0 0 0 3px;
		box-shadow: #213759 0 0 0 3px;
	}
	.button a.pushTop {
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		transform-origin: 100% 100%;
		-webkit-transform: rotateX(5deg);
		-moz-transform: rotateX(5deg);
		-o-transform: rotateX(5deg);
		-ms-transform: rotateX(5deg);
		transform: rotateX(5deg);
	}
	.button a.pushRight {
		-webkit-transform: rotateY(5deg);
		-moz-transform: rotateY(5deg);
		-o-transform: rotateY(5deg);
		-ms-transform: rotateY(5deg);
		transform: rotateY(5deg);
	}
	.button a.pushBottom {
		-webkit-transform: rotateX(-5deg);
		-moz-transform: rotateX(-5deg);
		-o-transform: rotateX(-5deg);
		-ms-transform: rotateX(-5deg);
		transform: rotateX(-5deg);
	}
	.button a.pushLeft {
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		transform-origin: 100% 100%;
		-webkit-transform: rotateY(-5deg);
		-moz-transform: rotateY(-5deg);
		-o-transform: rotateY(-5deg);
		-ms-transform: rotateY(-5deg);
		transform: rotateY(-5deg);
	}
	.button a.push {
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: scale(.96);
		-moz-transform: scale(.96);
		-o-transform: scale(.96);
		-ms-transform: scale(.96);
		transform: scale(.96);
	}
		.button a span {
			position: absolute;
			left: 15px;
			bottom: 10px;
		}
		.button a img {
			position: absolute;
			left: 50%;
			top: 25px;
			margin: 0 0 0 -22px;
		}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.button').mousedown(function(e){
  thatButton = $(this);
  var mouseX = e.pageX;
  var mouseY = e.pageY;
  var buttonLeft = thatButton.offset().left;
  var buttonTop = thatButton.offset().top;
  var buttonWidth = thatButton.width();
  var buttonHeight = thatButton.height();
  var clickLeft = mouseX - buttonLeft;
  var clickTop = mouseY - buttonTop;
  var orientation;
  
  if (clickLeft < buttonWidth / 2) {
    if (clickTop < buttonHeight / 2) {
      if (clickLeft < clickTop) {
        orientation = 'pushLeft';
      }
      else {
        orientation = 'pushTop';
      }
    }
    else {
      if (clickLeft < buttonHeight - clickTop) {
        orientation = 'pushLeft';
      }
      else {
        orientation = 'pushBottom';
      }
    }
  }
  else {
    if (clickTop < buttonHeight / 2) {
      if (buttonWidth - clickLeft < clickTop) {
        orientation = 'pushRight';
      }
      else {
        orientation = 'pushTop';
      }
    }
    else {
      if (buttonWidth - clickLeft < buttonHeight - clickTop) {
        orientation = 'pushRight';
      }
      else {
        orientation = 'pushBottom';
      }
    }
  }
  if ((clickLeft > buttonWidth / 3)&&(clickLeft < 2 * (buttonWidth / 3))&&(clickTop > buttonHeight / 3)&&(clickTop < 2 * (buttonHeight / 3))) {
    orientation = 'push';
  }
  $('a', thatButton).addClass(orientation);
});
$('.button').mouseup(function(){
  $('.button a').removeClass();
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................