Stylish Links With CSS

Photo by Fahrul Azmi on unsplash

What We Are Building

While the component being built here may at first seem mundane there is more than meets the eye. As they say, the devil is in the details. I am not only going to show you how I build an animated and stylish link component using css. I am also going to show how I properly type the component to make it HIGHLY reusable in a number of situations. Future users of the component will not have to worry about weather or not it will work for their situation. Need a link that opens a new tab/window to an external site? no problem. Need a link that gets wrapped by another component like Next.js <Link>? Again, no problem. This component is flexible and adaptable.

Initial Setup

For this component I have used @emotion/styled but we could have just as easily used a css module with a className. The important bits of css as well as how and why the link works with the Next.js <Link> element will be discussed. The article assumes you already have a Next.js application up and running. Details on how to start a Next.JS project can be found here next.js. Details on installing @emotion/styled can be found here @emotion/styled

$> npm install @emotion/styled

The Component a First Attempt

/components/AnimatedLink/index.tsx
01import styled from '@emotion/styled';
02
03const A = styled.a`
04  --color-app-secondary: 49, 130, 206;
05  position: relative;
06  padding: 0.2em 0;
07  overflow: hidden;
08  text-decoration: none;
09
10  &::after {
11    content: '';
12    position: absolute;
13    bottom: 0;
14    left: 0;
15    width: 100%;
16    height: 0.1em;
17    background-color: rgb(var(--color-app-secondary));
18    opacity: 0;
19    transform: scale(0);
20    transform-origin: center;
21    transition: opacity 300ms, transform 300ms;
22  }
23
24  &:hover::after {
25    opacity: 1;
26    transform: scale(1);
27  }
28`;
29
30type AProps = {
31  children: React.ReactNode;
32  className?: string;
33} & React.AnchorHTMLAttributes<HTMLAnchorElement>
34
35const AnimatedLink = ({
36  children,
37  className = '',
38  ...rest
39}: AProps) => {
40  return (
41    <A
42      className={`someClass ${className}`}
43      {...rest}
44    >
45      {children}
46    </A>
47  );
48});
49
50export default AnimatedLink;
51

This is a good first attempt. We have stripped the anchor element of it's usual styles and created a nice animated line underneath using the ::after pseudo-element and the :hover pseudo-selector.

Styled components generates a unique css class name for every component that is created with the styled. notation. The & gets replaced with the class name. So in the example above if the component is given the class name of .css-1h37a0y then the &::after gets translated to .css-1h37a0y::after.

We have also properly typed the component. The children prop should almost always be typed as ReactNode. See Typescript React Cheatsheet for more details. ClassName is a string and is optional here. Technically I did not need to include className but have done so in the interest of showing how you can give a component a className from a css module and still allow the users of the component to add additional classNames.

I have joined the base typings of the component with AnchorHTMLAttributes using a Typescript intersection (the &). This is what allows any user of the component to pass any valid anchor props to the component. I use {..rest} to spread those props out within the styled anchor element itself. In total this makes the component highly reusable because any user of the component can pass any valid anchor element props to it. Such as style={style}, rel={rel}, or the all important href={href}.

This Works, But Does It?

The component outlined above does work as a standard anchor element with a stylish css effect, but will it work with Next.js and the <Link> component? Not quite!

To use this component with the Next Link component we are going to need to do a little more. For starters using the component like this...

tsx
01import Link from "next/link";
02import AnimatedLink from "@app/components/AnimatedLink";
03
04export default function ({ href, name }) {
05  return (
06    <Link href={href}>
07      <AnimatedLink>{children}</AnimatedLink>
08    </Link>
09  );
10}
11

Does not properly set the href prop on the AnimatedLink. So when hovering it will not display the correct location that the Link is supposed to traverse to. This is very bad for SEO and something we need to correct. Fortunately it is easy to correct.

tsx
01import Link from "next/link";
02import AnimatedLink from "@app/components/AnimatedLink";
03
04export default function ({ href, name }) {
05  return (
06    <Link href={href} passHref>
07      <AnimatedLink>{children}</AnimatedLink>
08    </Link>
09  );
10}
11

The passHref prop will tell the <Link> component to properly pass the href prop down to our stylish AnimatedLink component. But there is still one more step!

The Final Steps

The final steps involve making sure that href, onClick and a ref are passed to the functional component that wraps our AnimatedLink. Without correctly using forwardRef and passing onClick a number of bugs can appear when using this component. The primary source of frustration is that rather then quickly loading the page that gets navigated to we will actually end up doing a full reload of the entire app whenever a new page is navigated to if we do not properly pass these props. This can cause flashing colors as well as give the whole app a sluggish feel.

/components/AnimatedLink/index.tsx
01import {forwardRef, MouseEventHandler} from 'react';
02import styled from '@emotion/styled';
03
04const A = styled.a`
05  --color-app-secondary: 49, 130, 206;
06  position: relative;
07  padding: 0.2em 0;
08  overflow: hidden;
09  text-decoration: none;
10
11  &:after {
12    content: '';
13    position: absolute;
14    bottom: 0;
15    left: 0;
16    width: 100%;
17    height: 0.1em;
18    background-color: rgb(var(--color-app-secondary));
19    opacity: 0;
20    transform: scale(0);
21    transform-origin: center;
22    transition: opacity 300ms, transform 300ms;
23  }
24
25  &:hover:after {
26    opacity: 1;
27    transform: scale(1);
28  }
29
30`;
31
32type AProps = {
33  children: React.ReactNode;
34  className?: string;
35  onClick?: MouseEventHandler<HTMLAnchorElement>
36} & React.AnchorHTMLAttributes<HTMLAnchorElement>
37
38const AnimatedLink = forwardRef<HTMLAnchorElement, AProps>(({
39  children,
40  className = '',
41  onClick,
42  ...rest
43}, ref) => {
44  return (
45    <A
46      ref={ref}
47      onClick={onClick}
48      className={className}
49      {...rest}
50    >
51      {children}
52    </A>
53  );
54});
55
56AnimatedLink.displayName = 'AnimatedLink';
57
58export default AnimatedLink;
59

This is the final version of our fully reusable, fully typed and very stylish AnimatedLink component. Feel free to tweak the css properties to see what other sorts of animations you can come up with. Hopefully you found this article useful.