Gradient влияет на hover

#html #css #css3

                    
Добрый день,подскажите как быть у 1 таблицы сделан градиент и hover.Ховер почему
то дико резко происходит, а во втором варианте просто background без градиента и все
плавно.Как исправить эту резкость? 
https://jsfiddle.net/Zkolya_linkoln/rgzzf94o/1/

#tablemenu1 td {
    cursor:pointer;
    background: linear-gradient(to bottom,#00b200,#009900);
    width:10%;
    height:45px;
    vertical-align: middle;
    border:1px solid #339900;
    text-align:center;
    transition: 2s;
    color:white;
    font-weight:900;
    font-family:"Roboto", Arial, sans-serif;
}
#tablemenu1 td:hover {
    background: #00b200;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}


Спасибо!
    

Ответы

Ответ 1

При наведении нужно изменять linear-gradient. 



#tablemenu1{ width:100%;}
#tablemenu1 td:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
#tablemenu1 td:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
#tablemenu1 td {
    cursor:pointer;
    background: linear-gradient(to bottom,#00b200,#009900);

   
    width:10%;
    height:45px;
    vertical-align: middle;
    border:1px solid #339900;
    text-align:center;
    transition: 2s;
    color:white;
    font-weight:900;
    font-family:"Roboto", Arial, sans-serif;
}
#tablemenu1 td a {color:white;}
#tablemenu1 td:hover {
    //background:#22dd66;
    background: linear-gradient(to bottom,#00b200,#00b200);
    //background: #00b200;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}


/*------------------------*/
#tablemenu2{ width:100%;}
#tablemenu2 td:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
#tablemenu2 td:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
#tablemenu2 td {
    cursor:pointer;
   
    background: green;
   
    width:10%;
    height:45px;
    vertical-align: middle;
    border:1px solid #339900;
    text-align:center;
    transition: 2s;
    color:white;
    font-weight:900;
    font-family:"Roboto", Arial, sans-serif;
}
#tablemenu2 td a {color:white;}
#tablemenu2 td:hover {

    background: #00b200;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

    

        
Об
Учереждении
        
Аккредитация
   
    

    

    

    

        
Об
Учереждении
        
Аккредитация