JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stage">
    <div id="button">Button</div>
</div>

CSS

#button{
    background: blue;
    border:2px solid red;
    width: 200px;
    text-align: center;
    height:50px;
    margin-bottom:20px;
    line-height:50px;
    color: #fff;
    border-radius: 5px;
    -webkit-perspective-origin: 50% 50%;
     //-webkit-transition:0.2s ease-in-out;
}

.stage{
    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 50%;
    width: 200px;
    margin: 0 auto;
}

.top-press{
    -webkit-transform: rotateX(30deg);
    box-shadow: 0 5px 5px rgba(0,0,0,0.5);
    -webkit-animation: spring-top 0.3s linear;
    -webkit-animation-fill-mode: forwards;
}

.top-off{
    -webkit-animation: spring-top-off 0.3s linear;
    -webkit-animation-fill-mode: forwards;
}

.top-right-press {
    -webkit-animation: spring-top-right 0.3s linear;
    -webkit-animation-fill-mode: forwards;
}

.top-left-press {
    -webkit-animation: spring-top-left 0.3s linear;
    -webkit-animation-fill-mode: forwards;
}

.right-press {
     -webkit-animation: spring-right 0.3s linear;
    -webkit-animation-fill-mode: forwards;
}

.right-press-off {
     -webkit-animation: spring-right-off 0.3s linear;
    -webkit-animation-fill-mode: forwards;
}

.bot-press{
    -webkit-transform: rotateX(-30deg);
   box-shadow: 0px 10px 20px rgba(0,0,0,0.3) inset;
    -webkit-animation: spring-bot 0.3s linear;
    -webkit-animation-fill-mode: forwards;
}

.bot-off{
   -webkit-animation: spring-bot-off 0.3s linear;
   -webkit-animation-fill-mode: forwards; 
}

@-webkit-keyframes spring-top
{
    0%   {-webkit-transform: rotateX(0deg);}
    35%  {-webkit-transform: rotateX(40deg);}
    65%  {-webkit-transform: rotateX(20deg);}
    85%  {-webkit-transform: rotateX(35deg);}
    95%  {-webkit-transform: rotateX(25deg);}
    98%  {-webkit-transform: rotateX(33deg);}
    100% {-webkit-transform: rotateX(30deg);}
}



@-webkit-keyframes spring-top-off
{
    0%   {-webkit-transform: rotateX(30deg);}
    35%  {-webkit-transform: rotateX(-20deg);}
    65%  {-webkit-transform:...

JavaScript

var button = $("#button");
var vector = [[0,0], [button.width(), 0], [button.width(),button.height()], [0, button.height()],[button.width()/2,button.height()/2]];

var spring = function(name){
    
    var obj = {
        name:name,
        generateTemplate: function(){
            return ["@-webkit-keyframes "+this.name,"0%   {-webkit-transform: rotate3d(1,0.25,0, 0deg);} 35%  {-webkit-transform: rotate3d(1,0.25,0,20deg);} 65%  {-webkit-transform: rotate3d(1,0.25,0,10deg);} 85%  {-webkit-transform: rotate3d(1,0.25,0,17deg);} 95%  {-webkit-transform: rotate3d(1,0.25,0,14deg);} 98%  {-webkit-transform: rotate3d(1,0.25,0,17deg);} 100% {-webkit-transform: rotate3d(1,0.25,0,15deg);}"]
        }
    }
    
    return obj;
}

var stl = new spring('spring-top-right');

console.log(stl.generateTemplate());

$('#button').mousedown(function(e){
    console.log(e.offsetY);
    
    var height = $(this).height(),
        midHeight = height/2,
        width = $(this).width(),
        off = 'bot-off top-off right-off left-off';
    
    
    if(e.offsetY < (height*25/100) && e.offsetX > (width *70/100)){
        $(this).removeClass(off).addClass('top-right-press');
    } else if(e.offsetY < (height*25/100) && e.offsetX < (width *30/100)){
        
        $(this).removeClass(off).addClass('top-left-press');
        
    } else if(e.offsetY > (height*25/100) && e.offsetY < (height*75/100) && e.offsetX > (width *70/100)){
        
        $(this).removeClass(off).addClass('right-press');
        
    } else if(e.offsetY >= midHeight){
        $(this).removeClass(off).addClass('bot-press');
    } else {
        $(this).removeClass(off).addClass('top-press');
    }
    
    
}).mouseup(function(){
    var that = this;
    setTimeout(function(){
        if($(that).hasClass('top-press')){
            $(that).removeClass('top-press').addClass('top-off');
        } else if($(that).hasClass('bot-press')){
            $(that).removeClass('bot-press').addClass('bot-off');
        } else...