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
Top comments (0)