Awsome Multicolor Animation for links ( HTML + CSS )

Ivan Cabral
Dec 3, 2019 · 2 min read

When you use the full potential of CSS you can create amazing animations for your website. but the problem is how. I have a shortcode for beginners that I want to show you so that you can give a lively touch to your titles and be able to demonstrate greater design potential.

Set the CSS Class

Add the name what you want in the class of the element <a> in the HTML code.

Set the style

In this step, we go to CSS file to set the animation with 3 seconds, the infinite loop, the transition with 0.7 seconds for all and the link style

Set the hover action

We set the size bigger in the hover action, the hover action is activated when the cursor hover the element.

Set the animation keyframes

Keyframes are used to set rule specifies for the animations, with these rules we can make awesome animations, in this case, we make a multicolored animation on the 3 seconds that we had configured before.

The result


The use of keyframes for our website is the best practice to make animations on professional websites. Thanks to these animations we can capture the attention of the user and offer a better experience.

Thanks for seeing my post good coding!!

Link Github:

Link CodePen:

Ivan Cabral

Written by

I‘m a daily coder FullStack developer with more than 10 years of experience, creator of gambling web sites, writer for JavaScript and Cryptocurrencies

More From Medium

More from Ivan Cabral

Also tagged Web Design

Also tagged Web Design

Designing the modern web

Matt Owens
Feb 24 · 12 min read


Also tagged CSS

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade