/ Button

Parallax 3D Button with JS controlled CSS variables

Parallax 3D Button with JS controlled CSS variables

Parallax 3D Button

Parallax 3D Button with JS controlled CSS variables.

Made with

Html
Css/SCSS
Javascript

html

<a href="#" data-title="Awesome Button"></a>

css

a {
	position: relative;
	display: inline-block;
	padding: 1.2em 2em;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	user-select: none;
	color: white;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: linear-gradient(135deg, #6e8efb, #a777e3);
		border-radius: 4px;
		transition: box-shadow .5s ease, transform .2s ease; 
		will-change: transform;
		box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
		transform:
			translateY(var(--ty, 0))
			rotateX(var(--rx, 0))
			rotateY(var(--ry, 0))
			translateZ(var(--tz, -12px));
	}
	
	&:hover::before {
		box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
	}
	
	&::after {
		position: relative;
		display: inline-block;
		content: attr(data-title);
		transition: transform .2s ease; 
		font-weight: bold;
		letter-spacing: .01em;
		will-change: transform;
		transform:
			translateY(var(--ty, 0))
			rotateX(var(--rx, 0))
			rotateY(var(--ry, 0));
	}
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	transform-style: preserve-3d;
	transform: perspective(800px);
}

js

const docStyle = document.documentElement.style
const aElem = document.querySelector('a')
const boundingClientRect = aElem.getBoundingClientRect()

aElem.onmousemove = function(e) {

	const x = e.clientX - boundingClientRect.left
	const y = e.clientY - boundingClientRect.top
	
	const xc = boundingClientRect.width/2
	const yc = boundingClientRect.height/2
	
	const dx = x - xc
	const dy = y - yc
	
	docStyle.setProperty('--rx', `${ dy/-1 }deg`)
	docStyle.setProperty('--ry', `${ dx/10 }deg`)
	
}

aElem.onmouseleave = function(e) {
	
	docStyle.setProperty('--ty', '0')
	docStyle.setProperty('--rx', '0')
	docStyle.setProperty('--ry', '0')
	
}

aElem.onmousedown = function(e) {
	
	docStyle.setProperty('--tz', '-25px')
	
}

document.body.onmouseup = function(e) {
	
	docStyle.setProperty('--tz', '-12px')
	
}

Author

Tobias Reich

Demo

See the Pen Parallax 3D Button with JS controlled CSS variables by Tobias Reich (@electerious) on CodePen.