CSS特殊的按钮闪烁效果

CSS特殊的按钮闪烁效果

　　本来想练习线性渐变做按钮的，但无意中发现了一个闪烁的效果，具体见代码

HTML:

<div>
	<a href="javascript:void(0)" class="button cyan">Daoma666</a>
</div>

CSS：

body>div{
		text-align: center;
		display: block;
		width: 800px;
		margin: 50px auto;
	}
.button
{
	font-family: Arial,helvetica,sans-serif;
	font-size: 13px;
	color: #000;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	padding: 7px 20px 9px;
	margin: .5em .5em .5em 0;/*根据相应字体大小font-size来定，在这个类里1em=13px*/
	cursor: pointer;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
	text-transform: capitalize;
	transition: 0.1s linear;
}
.cyan {
	background: rgb(130,207,241);
	background: -webkit-linear-gradient(to bottom,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
	background: linear-gradient(to bottom,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
	border: 1px solid #3cafcf;
}  
.cyan:hover {
	background: rgb(153,216,244);
	/*background: -webkit-linear-gradient(to bottom,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
	background: linear-gradient(to bottom,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);*/
	//原先这里的background打错了，导致渐变无效，然后就出现了闪烁效果，感觉比较抓人眼球。
}