JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='navigation'>
    <li>
        <div class='gradient'></div>
        <div>
            Seccion
        </div>
    </li>
    <li>
        <div class='gradient'></div>
        <div>
            Seccion
        </div>     
    </li>
<ul>

CSS

ul.navigation li {
    min-width: 114px;
    height: 37px;
    line-height: 21.5px;  
    text-align: center;
    position: relative;
    -webkit-transform: scale3d(.7, .7, 1);
    -moz-transform: scale3d(.7, .7, 1);
    -ms-transform: scale3d(.7, .7, 1);
    -o-transform: scale3d(.7, .7, 1);
    transform: scale3d(.7, .7, 1);
    font-size:24px;
    
    float: left;
    margin-right: 4px;
    border-style: solid;
    border-width: 2px;
    -webkit-border-image: url(ima/fondo_botones_nav.png) 2 fill stretch;
    border-image: url('ima/fondo_botones_nav.png') 2 fill stretch;
    -webkit-transition: -webkit-transform .4s .1s linear;
    transition: -ms-transform .4s .1s linear;
    display: list-item;
    
}
ul.navigation li * {
    pointer-events: none;
    color: #e6eaed;
    transition: .8s;
}
ul.navigation {
    list-style:none;    
}
ul.navigation li:hover {
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
ul.navigation li:hover div:nth-child(2) {
    color: hsl(200, 85%, 43.7%);
}

.gradient {
    width: 100%;
    height: 7px;
    position: absolute;
    top:-2px;
    
    background: radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
    background: -webkit-radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
    -webkit-animation: AoverNav .8s forwards .2s;
    animation: AoverNav .8s forwards .2s;
    
    transition: .8s all;
}

JavaScript

var liList = document.getElementsByClassName('navigation')[0].getElementsByTagName('li'),
    orig;

for(var i = 0, j = liList.length; i < j; i ++)
{
    liList[i].onmouseover = function() {
        var myGradient = this.getElementsByClassName('gradient')[0];
        
        orig = parseInt(window.getComputedStyle(myGradient, null).getPropertyValue("top"));        
        myGradient.style.top = parseInt(window.getComputedStyle(this, null).getPropertyValue("height")) - parseInt(window.getComputedStyle(myGradient, null).getPropertyValue("height"))  + "px";
    }
    liList[i].onmouseout = function() {
        var myGradient = this.getElementsByClassName('gradient')[0];
        
        myGradient.style.top = orig + "px";
    }
}