DEV Community 👩‍💻👨‍💻

Joelle
Joelle

Posted on

How to draw a box on hover with CSS

Hey everyone, I recently learned how to draw a box on hover using CSS and thought I would make a quick tutorial about it.

First you'll need a word or link to hover over. In the example below I'll be using a class called .navA, here is what the html for this could look like.

<a>Hover</a>
Enter fullscreen mode Exit fullscreen mode

Next you'll want to open a css file that is connected to either your html file or your component if you're using react. We will use transition to draw the box over time. I want to draw my box starting from the bottom and go left to right. So first i'll write out transition and give it a border-bottom and then I can set how long it will take for that part of the border to show up. Repeat this step for each side of the border.

.navA {
  text-decoration: none;
  transition: border-bottom .2s, border-left .4s, border-top .6s, border-right .9s;

}
Enter fullscreen mode Exit fullscreen mode

Cool now you know how to draw a box on hover with CSS. Play around with it and try changing the colors.

Top comments (2)

Collapse
 
gaizkamg profile image
gaizkamg

Hi!
Thanks for your tip, here is my version on codepen:
codepen.io/gaizkamg/pen/MWYOQey

Collapse
 
joellehelm profile image
Joelle Author • Edited on

That's awesome! I love how you changed the colors!

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠