JSFiddle - React, Tailwind, and code Playground

by sbochan

HTML

<button class="animatedBtn" disabled="disabled">submit</button>
<button id="a">disable</button>

CSS

.animatedBtn {
    display:block;
    padding:10px 30px;
    background-color: green;
    color: #fff;
    border:none;
    outline: none;
    cursor: pointer;
}

.animatedBtn:after {
    -webkit-animation:bounceOut 0.3s linear; 
    animation:bounceOut 0.3s linear; 
} 

@-webkit-keyframes bounceOut { 
    0% { 
        -webkit-transform: scale(1); 
    } 
    50% { 
        -webkit-transform: scale(.8); 
    } 
    100% { 
        -webkit-transform: scale(1); 
    } 
} 
@keyframes bounceOut { 
    0% { 
        transform: scale(1); 
    } 
    50% { 
        transform: scale(.8); 
    } 
    100% { 
        -webkit-transform: scale(1); 
    } 
}

JavaScript

$(document).ready(function(){
    
    $('#a').click(function(){
        $('.animatedBtn').removeAttr('disabled');
    });
    
    var $btn =  $('.animatedBtn');
    
    if($btn.length) {
        $btn.click(function(){
            $(this).addClass('animate bounce');
        });
    }
});