How to reproduce hover effect on tags dev.to ?

#webdev #beginners #css #modcss

Today, while passing through the site, I noticed this effect that occurs when hovering over one of the site's tags (just below the article titles).
I wanted to try to reproduce this effect. I explain below how I did it :

1. Use html link with a href

These tags are hypertext links that's why you can click on them and be redirected elsewhere on the site.

<a href="https://dev.to/t/css">#css</a>
<a href="https://dev.to/t/beginners">#beginners</a>
<a href="https://dev.to/t/programming">#programming</a>
<a href="https://dev.to/t/modcss">#modcss</a>

2. Customize this

In this case, the links are decorated with invisible border, an padding, the text decoration (underline) has been disabled, a color has been applied to the text and a rounded edges effect.

NB: So, it's very important to add a thickness to the border beforehand even if it will be invisible. This avoids moving the other components when hovering over.

I use MOD-CSS, a utility to quickly set style and manage states.

<a href="..." :box="tx.de[none] co[#202020] p[.5rem] br[6px] bd[1px solid transparent]">#css</a>
<a href="..." :box="tx.de[none] co[#202020] p[.5rem] br[6px] bd[1px solid transparent]">#beginners</a>
...

Meanings
text-decoration: tx.de
color: co
border-radius: br
padding: p
border: bd

3. Add hover effect

When hovered, the border reappears and the background is colored. Thus, we add a color of border and background.

<a href="//" :box="... && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#css</a>
<a href="//" :box="... && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#beginners</a>

Meanings
&& hover : to set properties on hover state
background : bg
border-color: bd.co

4. that's all !

full code

<a href="https://dev.to/t/css" :box="tx.de[none] co[#202020]
  p[.5rem] br[6px] bd[1px solid transparent] && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#css</a>

<a href="https://dev.to/t/beginners" :box="tx.de[none] co[#202020]
  p[.5rem] br[6px] bd[1px solid transparent] && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#beginners</a>

<a href="https://dev.to/t/programming" :box="tx.de[none] co[#202020] 
  p[.5rem] br[6px] bd[1px solid transparent] && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#programming</a>

<a href="https://dev.to/t/modcss" :box="tx.de[none] co[#202020]
  p[.5rem] br[6px] bd[1px solid transparent] && hover:bg[#e9a8a830] bd.co[#e9a8a8]">#modcss</a>

You can find snippet on codepen