Directional link effects with CSS variables

Directional link effects with CSS variables

We really like the CSS variables and what we can do with them. Changing them in JS is like using useState in React: The browser automatically re-renders the necessary parts. This allows you to build powerful effects in a few lines of code. My favourite is to track the position of the mouse to build directional cursor effects. Believe me: It’s a small detail, but you can’t stop hovering once you’ve seen it.

This tutorial here, explains the little magic behind the hover effect we’ve found on the menu of the Ackee site.


Track the position

We need to know the position of the cursor to build a directional effect. This can be done in JS.

document.querySelectorAll('.underline').forEach((elem) => {

	elem.onmouseenter =
	elem.onmouseleave = (e) => {

		const x = e.pageX - elem.offsetLeft
		elem.style.setProperty('--x', `${ x }px`)

	}

})

The CSS variable --x now contains the position of the mouse relative to the element. It will update whenever the mouse enters and leaves the element.

Reality however showed me that it looks a little bit weird when x is near, but not exactly left (0) or right (elem.clientWidth). Let’s fix this by adding a tolerance.

document.querySelectorAll('.underline').forEach((elem) => {

	elem.onmouseenter =
	elem.onmouseleave = (e) => {

		const tolerance = 10

		const left = 0
		const right = elem.clientWidth

		let x = e.pageX - elem.offsetLeft

		if (x - tolerance < left) x = left
		if (x + tolerance > right) x = right

		elem.style.setProperty('--x', `${ x }px`)

	}

})

Styling:

text-decoration: underline can’t be animated. We’re therefore adding a line below the element using an ::after pseudo element.

.underline {

	position: relative;
	color: rgba(255, 255, 255, .7); // 1
	text-decoration: none; // 1
	transition: color .3s cubic-bezier(.51, .92, .24, 1);

	// 2
	&::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 2px;
		background: linear-gradient(135deg, rgb(115, 250, 200), rgb(0, 190, 225));
		transform: scaleX(var(--scale, 0)); // 3
		transform-origin: var(--x) 50%; // 4
		transition: transform .3s cubic-bezier(.51, .92, .24, 1);
	}

	&:hover {
		color: white;
	}

	&:hover::after {
		--scale: 1; //5
	}

}
  1. Remove the default styling of the link
  2. Add a custom underline
  3. Use --scale to show and hide the underline (starting with 0 = hidden)
  4. Use --x to define the origin of the scale transform (the position of the mouse)
  5. Show the underline by changing the --scale variable

Conclusion:

That’s it already. A few lines of code and hovering links makes fun, again. Add the missing HTML and enjoy:

Fancy you stumbling on my piece of the internet. Bonjour!

My name is Anmol and I'm the Blogger-In-Chief of this joint & working as the Chief Technology Officer at Azoora, Inc. I'm putting up my views here trying to help creative solopreneurs, developers & designers build their business using the power of websites, apps & social media, this, is, my jam.

If you're looking to start your own online business with a professional high quality website or mobile app, just get in touch. I'd be more than happy to assist.

SKYPE | FACEBOOK | LINKEDIN | TWITTER | EMAIL

Leave a Comment

Your email address will not be published. Required fields are marked *