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>

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;

}

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

Comments

[gaizkamg]

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

[Joelle]

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