本当は全面「#eee」から波紋のように広げたかったのですが、ここまでで終始ついてしまった。

STYLE：

.LBtn	{
	text-decoration: none!important;
	font-family:メイリオ;
	display:inline-table;
	padding: 3mm 5mm;
	border-radius: 2mm;
	color: black;
	background-position:50%;
	background-size: 100%;
	background-image: linear-gradient(90deg,#eee,#eee,#eee,#eee,#ccc,#eee,#eee,#eee,#eee);
	transition: background-size 1s linear 0s;
}
.LBtn:hover	{
	background-size: 700%;
}
.LBtn:active	{
	background-color:#f003;
	background-image: none;
}
.LBtn:visited	{
}

HTML：

<A class=LBtn href="">てすとです</A>