<!-- Code by Fedyaeva -->
<style>
    :root {
        --button-background: #FFFFFF;
        --blend-mode: difference;
    }
    .button--bubled{cursor:pointer}.button--bubled .tn-atom{position:relative;overflow:hidden}.button--bubled .button--bubled__circle{position:absolute;display:block;width:0;height:0;border-radius:50%;background-color:#FFF;transition:width 0.5s ease-in-out,height 0.5s ease-in-out;transform:translate(-50%,-50%);z-index:1;mix-blend-mode:difference;pointer-events: none;}.button--bubled:hover .button--bubled__circle{width:400px;height:400px;}
</style>
<script>
    document.addEventListener("DOMContentLoaded",()=>{let btn=document.querySelectorAll('.button--bubled');let circle;btn.forEach((e)=>{circle=e.querySelector('.tn-atom');let span=document.createElement('span');span.classList.add('button--bubled__circle');circle.appendChild(span);e.addEventListener('mouseenter',(evt)=>{let pos=event.target.getBoundingClientRect();let y=pos.top+window.pageYOffset;let x=pos.left+window.pageXOffset;let relX=evt.pageX-x;let relY=evt.pageY-y;span.setAttribute("style",`top: ${relY}px; left: ${relX}px`)});e.addEventListener('mouseout',(evt)=>{let pos=event.target.getBoundingClientRect();let y=pos.top+window.pageYOffset;let x=pos.left+window.pageXOffset;let relX=evt.pageX-x;let relY=evt.pageY-y;span.setAttribute("style",`top: ${relY}px; left: ${relX}px`)})})})
</script>