button fill

.t-btn
	position: relative
	overflow: hidden
	padding: 20px
	background: #fff
	display: inline-block

	.bg
		position: absolute
		background: red
		size: 0
		background: #000
		transition: width 400ms, height 400ms
		will-transform: width
		transform: translate(-50%, -50%)
		border-radius: 50%
		pointer-events: none

	span:not(.bg)
		z-index: 2
		position: relative

	&.hover
		color: #fff

		.bg
			size: 30vw
      
      
      

export default class Button {
	constructor(app) {
		app.on('init', () => {
			this.init()
		})
	}

	init() {
		x('.t-btn').forEach(el => {
			$(el).hover((e) => {
				e = e.originalEvent
				let bg = x(el).x('.bg')
				if (bg.length != 0) {
					let bCoods = el.getBoundingClientRect()
					let x = e.clientX - bCoods.x
					let y = e.clientY - bCoods.y

					bg.style.top = y + 'px'
					bg.style.left = x + 'px'
				}

				setTimeout(() => { el.addClass('hover') }, 50)
			}, () => {
				el.removeClass('hover')
			})
		})
	}
}