scratch-box

scratch-box is a web component wrapper around the "CUSTOM ANIMATED CHECKBOXES" codepen by Sara Soueidan.

To use from CDN:

        <scratch-box>
            <span slot=labelTxt>Create demo</span>
        </scratch-box>
        <scratch-box>
            <span slot=labelTxt>Write article</span>
        </scratch-box>
        <scratch-box>
            <span slot=labelTxt>Excercise</span>
        </scratch-box>
        <style>
                @import url(https://fonts.googleapis.com/css?family=Indie+Flower);
            </style>
        <script type="module" src="https://unpkg.com/scratch-box@0.0.2/scratch-box.js?module"></script>
    </div>

or

        <scratch-box>
            <span slot=labelTxt>Create demo</span>
        </scratch-box>
        <scratch-box>
            <span slot=labelTxt>Write article</span>
        </scratch-box>
        <scratch-box>
            <span slot=labelTxt>Excercise</span>
        </scratch-box>
        <style>
                @import url(https://fonts.googleapis.com/css?family=Indie+Flower);
            </style>
        <script type="module" src="https://cdn.pika.dev/scratch-box"></script>
    </div>

Or

npm install -s scratch-box

Demo