JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

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

CSS

#button{
    background: blue;
    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;
}

.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: rotateX(15deg);}
    85%  {-webkit-transform: rotateX(-10deg);}
    95%  {-webkit-transform: rotateX(5deg);}
    98%  {-webkit-transform: rotateX(-3deg);}
    100% {-webkit-transform: rotateX(0deg);}
}

@-webkit-keyframes spring-bot
{
    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:...

JavaScript

$('#button').mousedown(function(e){
    console.log(e.offsetY);
    
    var height = $(this).height();
    var midHeight = height/2;
    
    if(e.offsetY >= midHeight){
        $(this).removeClass('bot-off top-off').addClass('bot-press');
    } else {
        $(this).removeClass('top-off bot-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');
        }
        
    },150);
});