JSFiddle - React, Tailwind, and code Playground

by Anisuzzaman Khan

HTML

<div class="outer">
    <div class="inner" id="circle"></div>
</div>
<button id="plus" type="button" class="btn btn-default">Resize</button>

CSS

#circle {
    width: 100%;
    height: 100%;
    background: #fc2e5a;
    -moz-border-radius: 120px;
    -webkit-border-radius: 120px;
    border-radius: 120px;
/*     left:50%;
    top:50%;
    margin:-100px 0 0 -150px; */
}
.inner {
    position: absolute;
}
.outer {
    position:relative;
    width: 235px;
    height: 220px;
    left:50%;
    top:50%;
}

JavaScript

$(function () {
    $("#plus").on("click", function () {
        $(".outer").animate({
            left: '-=1%',
            top: '-=1%'
        }, {
            duration: 500,
            queue: false
        });
        
        $(".outer").animate({
            width: '+=20px',
            height: '+=20px',
            borderRadius: '+=10px'
        }, {
            duration: 500,
            queue: false
        });
    });
});