Add a little spark to your clicks. ✨
Put the custom element before the closing </body> tag:
<body>
<!-- other page elements -->
<click-spark></click-spark>
</body>Set a spark color via CSS custom property:
<click-spark style="--click-spark-color: blue"></click-spark>Want the spark to only occur on particular elements? Pass in a comma-separated list of selectors:
<click-spark active-on=".send-sparks, #i-love-sparks, [data-sparks]"></click-spark>Here's a CodePen demo of that example.
This is very experimental and created for the joy of the web. More testing should be done before deploying this one to prod.
PRs and feedback always welcome. 🎷