JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="CompletionCheckbox SingleTaskTitleRow-checkbox">
<div class="CircularToggleButton--recentlyToggled CircularToggleButton">
<div class="CircularToggleButton-pulse"></div>
<a class="CircularButton CircularButton--enabled CircularButton--medium" tabindex="0" aria-role="button"><div class="CircularButton-label"><svg class="Icon CheckIcon" title="CheckIcon" viewBox="0 0 32 32"><polygon points="27.672,4.786 10.901,21.557 4.328,14.984 1.5,17.812 10.901,27.214 30.5,7.615 "></polygon></svg></div></a>
</div>
</div>

CSS

.SingleTaskTitleRow-checkbox, .SingleTaskTitleRow-merge, .SingleTaskTitleRow-projectIcon {
    display: inline-block;
    left: 10px;
    position: absolute;
    z-index: 100;
}

.CircularToggleButton {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 30px;
    position: relative;
    width: 30px;
}
.CompletionCheckbox .CircularToggleButton .CircularToggleButton-pulse {
    background: -webkit-radial-gradient(rgba(59, 247, 209, 0), rgba(59, 247, 209, 0) 40%, rgba(59, 247, 209, 0.5));
    background: radial-gradient(rgba(59, 247, 209, 0), rgba(59, 247, 209, 0) 40%, rgba(59, 247, 209, 0.5));
}

.CircularToggleButton--toggledOn.CircularToggleButton--recentlyToggled .CircularToggleButton-pulse {
    -webkit-animation: button-gradient-explosion cubic-bezier(0.19, 1, 0.355, 0.92) 0.4s,button-gradient-fade cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.4s;
    animation: button-gradient-explosion cubic-bezier(0.19, 1, 0.355, 0.92) 0.4s,button-gradient-fade cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.4s;
}

.CircularToggleButton-pulse {
    border-radius: 50%;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.CompletionCheckbox .CircularToggleButton.CircularToggleButton--toggledOn .CircularButton {
    background: #3be8b0;
    border-color: #3be8b0;
    color: #fff;
    fill: #fff;
}

.CircularButton.CircularButton--medium {
    height: 30px;
    width: 30px;
}

.CircularButton {
    background: #fff;
    border: 1px solid #b9bcc0;
    border-radius: 50%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #b9bcc0;
    fill: #b9bcc0;
    font-size: 13px;
    height: 30px;
    line-height: 1;
    -webkit-transition: 200ms box-shadow,200ms color,200ms background,200ms fill;
    transition: 200ms box-shadow,200ms color,200ms background,200ms fill;
    width: 30px;
    display: inline-block;
}

.CircularButton-label...

JavaScript

$(".CircularButton").on("click", function(){
   $(this).parent().toggleClass("CircularToggleButton--toggledOn");
})