button.btn Hover me
View Compiled
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
View Compiled
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 => {
			if (e.toElement === null) {
				// 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']
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/gsap@3.0.2/dist/gsap.min.js