<span class="relief">
<button class="relief__btn">Hover me</button>
</span>

:root {
--bg: #c2b2a7;
--col: #02253d;
}

body {
display: grid;
place-items: center;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
background-color: var( --bg );
color: var( --col );
font-family: 'Poppins', sans-serif;
perspetive: 1000px;
}

.relief {
position: relative;
padding: 10vw 15vw;
border-top: 2px solid var( --col );
border-bottom: 2px solid var( --col );

&__btn {
all: unset;
appearance: none;

cursor: pointer;
display: block;
position: relative;
z-index: 0;

background: var( --col ) radial-gradient(circle at var( --rex, -200% ) var( --rey, -200% ), rgba(194,178,167,.6) 0%, var( --col ) 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: inherit;
font-size: 7.5vw;
text-align: center;
text-transform: uppercase;
transform: center center;
transition: opacity .5s ease;

&:hover,
&:focus,
&:active {
//opacity: 0.75;
}
}
}

console.clear()

const button = document.querySelector( '.relief' )

class ReliefButton {
constructor( element, options = {} ) {
this.outer = element
this.inner = element.children[0]

// Options
this.options = {
power: options.power || 30,
index: options.index || 5,
perspective: options.perspective || '600px'
}

// Init
this.create()
this.mouseUpdate()

this.animate()
}

create() {
this.delta = { x: 0, y: 0 }
this.padding = { x: 0, y: 0 }

this.outer.client = this.outer.getBoundingClientRect()
this.inner.client = this.inner.getBoundingClientRect()

this.padding.x = ( this.outer.client.width - this.inner.client.width )
this.padding.y = ( this.outer.client.height - this.inner.client.height )

gsap.set( this.outer, {
perspective: this.options.perspective,
} )
}

mouseUpdate() {
this.outer.addEventListener( 'mousemove', e => {
this.delta.x = ( ( e.clientX - this.outer.client.left ) / this.outer.client.width ) - .5
this.delta.y = ( ( e.clientY - this.outer.client.top ) / this.outer.client.height ) - .5
} )

this.outer.addEventListener( 'mouseleave', e => {
gsap.to( this.inner, { x: 0, y: 0, z: 0, rotateX: 0, rotateY: 0, rotateZ: 0, '--rex': '-200%', '--rey': '-200%', delay: .3, duration: 1 } )
} )
}

animate() {
this.outer.addEventListener( 'mousemove', e => {
gsap.to( this.inner, {
x: this.delta.x * this.padding.x,
y: this.delta.y * this.padding.y,
rotateX: `${- this.delta.y * this.options.power}deg`,
rotateY: `${this.delta.x * this.options.power}deg`,
'--rex': `${ ( this.delta.x + .25) * 200 }%`,
'--rey': `${ ( this.delta.y + .25) * 200 }%`,
} )
} )
}
}

new ReliefButton( button )