This new website layout is quite minimalist and mostly plays on typography styles and hierarchy. I wanted to add some spice to such a simple base—so what better way than doing it rainbow-style on hyperlinks?1
The general idea is that my hyperlinks are underlined by default2 as they are the same color as the body text. When hovered of focused, they are animated with CSS keyframes that seamlessly transition through a list of colors. To differentiate the focus
from hover
state, I removed the underline and added an outline
around the link instead3.
As you noticed, I am not a very talented web dev blogger, so I'll just drop my CSS below.
a {
color: white;
text-underline-position: under;
}
a:hover {
animation: color-change 5s infinite;
}
a:focus {
animation: color-change 5s infinite;
text-decoration: none;
outline-offset: 0.1em;
outline: 0.1em solid;
}
@keyframes color-change {
5% {
color: hsl(0, 100%, 30%);
}
15% {
color: hsl(41, 100%, 33%);
}
30% {
color: hsl(140, 100%, 27%);
}
50% {
color: hsl(230, 100%, 50%);
}
70% {
color: hsl(261, 100%, 55%);
}
90% {
color: hsl(320, 100%, 31%);
}
}