Подскажите пожалуйста как сделать что бы при наведении на кнопку появлялся эффект блеска. Я думал что этого можно достичь таким способом
a{
transition: all 1s ease 0s;
}
a:hover
{
background: linear-gradient(45deg, red, white);
}
<br>
Кнопки сделаны в виде списка со ссылками (схематично ниже)
<ul>
<li>
<a> Text</a>
</li>
</ul>
Выходит что градиент накладывается на всю область сразу, а по тексту идёт с задержкой(Что очень не приятно :( ) В идеале нужно что бы узкая полоска градиента прошла от левого нижнего до правого верхнего углов. Помогите реализоваться пожалуйста. Любые идеи принимаются!