UI: Magnetic Button 

A magnetic button.

<div class="ct-div-block overlay post-card">
    <div  class="post-card-read-box">
        <a class="post-card-read-link" href="http://" target="_self" >
            <div class="post-card-read-text">
                OKU
            </div>
        </a>
    </div>
</div>
.post-card-read-box {
    padding:24px;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items: center;
}
.post-card-read-link {
    width:100%;
    height:100%;
    border-radius:100px;
    border:1px solid #fff;
    transition: all 600ms ease-out !important;
}
.post-card-read-text {
    font-size:14px;
    letter-spacing:3px;
    text-transform: uppercase;
    transition: all 600ms ease-out !important;
}
function magneticEffect(){
    let card = document.querySelector('#%%ELEMENT_ID%%');
    let readBox = card.querySelector(".post-card-read-box");
      let readLink = card.querySelector(".post-card-read-link");

      console.log("magnetic card elements: ", card, readBox, readLink);

      readBox.addEventListener("mousemove", function(e){
          /* Read Box */
        let { width:rb_width, height:rb_height, x:rb_x, y:rb_y } = readBox.getBoundingClientRect();
          let rb_center_x = rb_x + rb_width/2;
          let rb_center_y = rb_y + rb_height/2;

          /* Cursor */
          let cx = e.x;
          let cy = e.y;

        /* Difference */
          let x_diff = rb_center_x - cx;
        let y_diff = rb_center_y - cy;

          /* Transform*/
          readLink.style.transform = `translate3d(${-x_diff/4}px, ${-y_diff/4}px,0) scale(1.1)`;
    })

    /* Reset */
      readBox.addEventListener("mouseleave", function(e){
          readLink.style.transform = `translate3d(0px ,0px ,0px) scale(1.0)`;
    })
}
magneticEffect()