Как сделать блеск на кнопке

#html #css #css3 #градиент

Подскажите пожалуйста как сделать что бы при наведении на кнопку появлялся эффект
блеска. Я думал что этого можно достичь таким способом 

a{
transition: all 1s ease 0s; 
}
a:hover
{
background: linear-gradient(45deg, red, white);
}




Кнопки сделаны в виде списка со ссылками (схематично ниже)

 
 
 
   Text 
 



Выходит что градиент накладывается на всю область сразу, а по тексту идёт с задержкой(Что
очень не приятно :( ) 
В идеале нужно что бы узкая полоска градиента прошла от левого нижнего до правого
верхнего углов. 
Помогите реализоваться пожалуйста. Любые идеи принимаются!
    

Ответы

Ответ 1

Легко гуглится в интернете, например такие кнопки, не важно ссылка это или див, ссылке
же тоже можно применить блочную модель: http://jsfiddle.net/jLhgve2j/



/**
 * Icon
 */

.icon {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 25px 0 25px 25px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  font-size: 12px;
  font-family: sans-serif;
}
.icon:nth-child(1) {
  background: cornflowerblue;
}
.icon:nth-child(2) {
  background: salmon;
}
.icon:nth-child(3) {
  background: gray;
}
/**
 * The "shine" element
 */

.icon:after {
  content: "";
  height: 200%;
  left: -230%;
  opacity: 0;
  position: absolute;
  top: -20%;
  transform: rotate(-30deg);
  width: 200%;
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255,
255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}
/* Hover state - trigger effect */

.icon:hover:after {
  left: -50%;
  opacity: 1;
  top: -50%;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-property: left, top, opacity;
  transition-timing-function: ease;
}
/* Active state */

.icon:active:after {
  opacity: 0;
}
let
it
shine