button.btn Hover me

html
  background-color: #fff
  
body
  display: flex
  align-items: center
  justify-content: center
  height: 100vh
  background-image: url('https://images.unsplash.com/photo-1569350080887-dd38c27caad0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80')
  background-position: center
  background-size: cover

.btn
  background-color: orange
  margin-top: -30vh
  border: none
  padding: 16px 32px
  cursor: pointer

class FollowCur {
  constructor(options = {}) {
    this.cur = null
    this.flw = false
    this.options = options
    
    this.width = this.options.width || 20
    this.height = this.options.height || 20
    this.bdRadius = this.options.bdRadius || '50%'
    
    this.create()
    this.attachEvent()
  }
  
  attachEvent() {
    window.addEventListener('mousemove', e => {
      this.follow(e)
    })
    
    window.addEventListener('mouseout', e => {
        // TweenLite.to(this.cur, .4, { opacity: 0 })
        gsap.to(this.cur, { opacity: 0, duration: .4 })
        this.flw = false
    })
    
    const boxes = this.options.hoverElems
    if (boxes && boxes.length) {
      for (let i = 0; i < boxes.length; i++) {
        const nodes = document.querySelectorAll(boxes[i])
        for (let j = 0; j < nodes.length; j++) {
          const node = nodes[i]
          node.addEventListener('mouseenter', e => {
            // TweenLite.to(this.cur, .3, {
            //  scale: 1.6,
            //  opacity: 0
            // })
            gsap.to(this.cur, {
              scale: 1.6,
              opacity: 0,
              duration: .3
            })
          })
          node.addEventListener('mouseleave', e => {
            // TweenLite.to(this.cur, .3, {
            //  scale: 1,
            //  opacity: 1
            // })
            gsap.to(this.cur, {
              scale: 1,
              opacity: 1,
              duration: .3
            })
          })
        }
      }
    }
    
  }
  
  follow(e) {
    const x = e.clientX
    const y = e.clientY
    
    if (!this.flw) {
      // TweenLite.set(this.cur, { x, y })
      gsap.set(this.cur, { x, y })
      // TweenLite.to(this.cur, 0.4, {
      //  opacity: 1,
      //  ease: Sine.easeOut
      // })
      gsap.to(this.cur, {
        opacity: 1,
        duration: .4,
        ease: "Sine.easeOut"
      })
      this.flw = true
    }
    
    // TweenLite.to(this.cur, 0.4, { 
    //  x, y, ease: Sine.easeOut 
    // })
    gsap.to(this.cur, { 
      x, y, ease: "Sine.easeOut ", duration: .4
    })
  }
  
  create() {
    this.cur = document.createElement('div')
    this.cur.className = 'follow-cur'
    this.cur.style.width = `${this.width}px`
    this.cur.style.height = `${this.height}px`
    this.cur.style.marginLeft = `-${this.width / 2}px`
    this.cur.style.marginTop = `-${this.height / 2}px`
    this.cur.style.borderRadius = this.bdRadius
    this.cur.style.zIndex = 9999999
    this.cur.style.pointerEvents = 'none'
    this.cur.style.opacity = 0
    // this.cur.style.backgroundColor = 'rgba(0,0,0, 0.6)'
    this.cur.style.backgroundColor = 'white'
    this.cur.style.mixBlendMode = 'exclusion'
    this.cur.style.backfaceVisibility = 'hidden'
    this.cur.style.position = 'fixed'
    this.cur.style.top = '0px'
    this.cur.style.left = '0px'
    document.body.appendChild(this.cur)
  }
}

new FollowCur({
  width: 30,
  height: 30,
  hoverElems: ['.btn']
})