JSFiddle - React, Tailwind, and code Playground

by Jehzeel Laurente

HTML

<link rel="stylesheet" href="http://tympanus.net/Development/CreativeButtons/css/component.css">
<script src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/themes/codropstheme02/js/modernizr.custom.70736.js"></script>
<div id="theCount">1</div>
<button id="addMe" class="btn btn-7 btn-7e btn-icon-only icon-heart">  
</button>
    <input type="hidden" id="hiddenVal" value="1">

CSS

#theCount {
    font-size: 50px;
    font-family: Arial;
    float: left;
}
.active {
    background-color: lightblue;
    transition: background 3s ease-in-out;
    color: #000;
    transition: color 3s ease-in-out;
}

.btn:hover {
    background: red;
    transform: scale(1.2);
    transition: transform 0.3s ease-in-out;
}

.btn:not(:hover) {
    transform: scale(1.0);
    transition: transform 0.3s ease-in-out;
}
}

JavaScript

$(document).ready(function() {
            $("#addMe").one('click',function(){
                var counter = parseInt($("#hiddenVal").val());
                counter++;
                $("#hiddenVal").val(counter);
                $("#theCount").text(counter);
                $("#addMe").toggleClass('active');
            });
        });