css 按钮hover有光影效果

html:

<!-- 带背景纹理的区域 -->
	<div class="bgpattern">
		<div class="bgpattern_bg"></div>
		<div class="">https://gravit.io/</div>
	</div>

	<!-- 光影划过 -->
	https://codepen.io/andreasstorm/pen/gofFm
	<div class="cntr">
	  <button>SUBMIT</button>
	</div>

css：

/*纹理区域*/
	.bgpattern{ background: linear-gradient(#6ab2fb,#0b81ff); background: -webkit-linear-gradient(#6ab2fb,#0b81ff); position: relative; min-height: 500px; color: #fff}
	/*.bgpattern_bg{ position: absolute; background: url(img/techpattern.png) repeat; width: 100%; height: 100%; background-size: 56px auto}*/


	/*光影划过*/
	body{ font-family: 'Lato', sans-serif }
  	
  
	button{
	  position: relative;
	  background: #000;
	  border: 0;
	  padding: 14px 42px;
	  border-radius: 3px;
	  cursor: pointer;
	  overflow: hidden;
	  outline: none;
	  font-weight: 400;
	  font-size: 12px;
	  color: #fff;
	  letter-spacing: .2em;
	  box-shadow: 0 8px 32px rgba(#000,.2);
	  transition: all .2s ease}
	  button:after{
	    content: '';
	    position: absolute;
	    top: 0;
	    left: -200%;
	    width: 200%;
	    height: 100%;
	    transform: skewX(-20deg);
	    background-image: -moz-linear-gradient( 0deg, rgba(255,255,255,0) 10%, rgb(255,255,255,0.3) 50%, rgba(255,255,255,0) 90%);
  		background-image: -webkit-linear-gradient( 0deg, rgba(255,255,255,0) 10%, rgb(255,255,255,0.3) 50%, rgba(255,255,255,0) 90%);
 		background-image: -ms-linear-gradient( 0deg, rgba(255,255,255,0) 10%, rgb(255,255,255,0.3) 50%, rgba(255,255,255,0) 90%);}

	  button:hover:after{
	    animation: shine 1.6s ease}

	  button:active{
	    transform: translateY(1px);
	    box-shadow: 0 4px 16px rgba(#000,.2)}
	    
	.cntr{
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);  }

	
	@keyframes shine{
	  100%{ left: 200%}
	}

 效果：

 

如果只是单纯的想要按钮背景色缓慢变化，则只需要加入延迟即可。如下：

        <div class="nav">

		<div class="btns">
			<a class="btn btn-primary" href="#">Use it Online</a>
			<a class="btn btn-pink" href="#">Use it Online</a>
		</div>

	</div>

/*按钮*/
	.btns .btn{ display: inline-block; height: 40px; line-height: 40px; color: #fff; margin: 20px 15px; font-size: 16px; padding: 0 20px; border-radius: 3px; -webkit-transition: background .3s ease-in-out; transition: background .3s ease-in-out;}

	.btn-primary{ background-color: #00a0ff }
	.btn-primary:hover{ background-color: #0070b3; }

	.btn-pink{ background-color: #ff214e}
	.btn-pink:hover{ background-color: #d4002b }

效果：

重要的是这句话：

transition: background .3s ease-in-out;