DEV Community

How To: Create A Rainbow Link Hover Effect

Emmy | Pixi on July 17, 2020

So, typically I try to write pretty long, in-depth articles and tutorials. This week I do not have the energy, so we're doing a quick tutorial on h...
Collapse
 
vickilanger profile image
Vicki Langer

This is THE BEST! We had extra time in class today, so I had my students add this to their projects. Very cool stuff!

Collapse
 
thecodepixi profile image
Emmy | Pixi

That's so fun!! I'm so glad you got to use it with your students!

Collapse
 
vickilanger profile image
Vicki Langer

We did the hover over the h1. I think they really enjoyed adding all the colors. Thanks! aalesiak.codewizardshq.com/m12_htm...

Thread Thread
 
thecodepixi profile image
Emmy | Pixi

OMG I love it!

Collapse
 
stlnick profile image
Nick

I had no idea about background-clip.

This is awesome, thank you! Definitely gonna play around with this.

Collapse
 
thecodepixi profile image
Emmy | Pixi

Ah cool! I'm glad I could teach you something new 😊

Collapse
 
andhop profile image
Andy Hopwood

Awesome tutorial on background clip. Still getting used to that myself. Thank you!

Collapse
 
limusina10 profile image
limusina10

Nice, but I think we can imporve it:
Take a look at the answer of this question on StackOverflow:
stackoverflow.com/questions/547021...
Hope helps!

Collapse
 
thecodepixi profile image
Emmy | Pixi

That's cool but also accomplishes a totally different thing.

Collapse
 
limusina10 profile image
limusina10

Ok sure, but the option exist ;)

Collapse
 
cydstumpel profile image
Cyd

Love the background clip property! If you put the transition on the a in stead of the hover state it will transition both ways✨

Collapse
 
thecodepixi profile image
Emmy | Pixi

Oh heck, you're right! Thanks for catching that

Collapse
 
codeperfectplus profile image
Deepak Raj

This is really helpful.

Collapse
 
scrabill profile image
Shannon Crabill

This is the beeeeeest. Thank you for writing up this tutorial. I can always use more gradient hover effects in my life.

Collapse
 
thecodepixi profile image
Emmy | Pixi

Gradient all the things! 🙌

Collapse
 
klvenky profile image
Venkatesh KL

That was one of the shortest and useful posts I've gone through recently. Highly recommended