Shine

by vovkasolovev

HTML

<button>заказать</button>

CSS

body{background: #111;}
button{padding: 10px 15px; display: inline-block; border: 0px; background: transparent; text-transform: uppercase; font-weight: bold; letter-spacing: 0.05em; color: white}
button {
  box-shadow: 0 0 0 3px #0077ff inset;
  border-radius:3px;
  position: relative;
  overflow:hidden;
  z-index:2;
}

/* Shine */
button:after {
	content:'';
  top:0;
	transform:translateX(100%);
	width:100%;
	height:44px;
	position: absolute;
	z-index:1;
	animation: shine 10s infinite 3s;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b2e1ff+40,d6efff+60,66b6fc+70&0+40,0.3+60,0+70 */
background: -moz-linear-gradient(-45deg, rgba(178,225,255,0) 40%, rgba(214,239,255,0.3) 60%, rgba(102,182,252,0) 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(178,225,255,0) 40%,rgba(214,239,255,0.3) 60%,rgba(102,182,252,0) 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(178,225,255,0) 40%,rgba(214,239,255,0.3) 60%,rgba(102,182,252,0) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b2e1ff', endColorstr='#0066b6fc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

/* animation */
@keyframes shine {
	0% {transform:translateX(-200%);}
  80% {transform:translateX(-100%);}
  93% {transform:translateX(-100%);}
  95% {transform:translateX(-105%);}
	100% {transform:translateX(200%);}
}