How to animate border-top effect

Question

When you hover over "Login,Sign up" acorns website (https://www.acorns.com/) you can see animation going along. So I have a li

.navbar  li{
    display: inline-block;
   border-width:5px;    
   border-top-style:solid;
   border-top-color: white;

}

.navbar li:hover, .navbar li:active{
   border-width:4px;    
   border-top-style:solid;
   border-top-color: #e0b82b;}

How is it possible to make the border-top animated ? Like shown above. Thank you.

http://jsfiddle.net/9mfccz6w/ I'm trying to animate top bar (yellow)

You know you can view the source code of a website and see what they are doing right? — NathanOliver, Jul 14 '15 at 15:18
Doing what NathanOliver suggested you will notice Acorns use a `:before` pseudo element and apply `opacity: 0` and `transform: scale(0)` to it and use `transition` for the animation. On `:hover:before` the `opacity` and the `transform` are changed. — BillyNate, Jul 14 '15 at 15:23
So someone found the code for bottom. Is it possbile to animate the top ? http://jsfiddle.net/9mfccz6w/ — Ben, Jul 14 '15 at 15:55
for your specific problem a `:before`, `display: block` element (with then animated height and (background) color) might be the easier approach to achieve the same look. — Frank N, Feb 08 '20 at 10:32

Lansana Camara · Answer 1 · 2015-07-14T15:24:54.433

.navbar  li {
   display: inline-block;
   border-width:5px;    
   border-top-style:solid;
   border-top-color: white;
   -webkit-transition: all .3s ease-in-out;
           transition: all .3s ease-in-out;
}

.navbar  li:hover {
   -webkit-transform: translateY(-2px);
      -moz-transform: translateY(-2px);
       -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
           transform: translateY(-2px);
}

The above code will spice up your li's a bit.

Look into CSS3 animations: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

score 0 · Answer 2 · answered Jul 14 '15 at 15:20

0

You can add CSS Tranistions to your .navbar li style. Try this code:

.navbar  li{
   display: inline-block;
   border-width:5px;    
   border-top-style:solid;
   border-top-color: white;
   -webkit-transition: all 0.5s ease;                  
   -moz-transition: all 0.5s ease;                 
   -o-transition: all 0.5s ease;   
   -ms-transition: all 0.5s ease;          
   transition: all 0.5s ease;
}

JSFiddle

answered Jul 14 '15 at 15:20

Patric

1,489
13
28

wow thanks, is it also possible to make it "grow" from smaller to bigger? – Ben Jul 14 '15 at 15:29
that's a bit trickier. check this out: http://stackoverflow.com/questions/28623446/expand-border-from-center-on-hover – Patric Jul 14 '15 at 15:38
I tried to use same code and change to border-top but it's not reacting at all.. Is it possbile to make it above? – Ben Jul 14 '15 at 15:52
just use the `:before` pseudo element instead of `:after`. there you go: http://jsfiddle.net/9mfccz6w/5/ – Patric Jul 15 '15 at 07:16

How to animate border-top effect

2 Answers2