Проверьте на корректность кода

[aqua.77]

В принципе всё работает как я хотел и это главное, но возможно эту же задачу можно выполнить более разумно или корректнее? Может ли данный код считаться пригодным? Задача была сделать резиновые кнопки с анимацией.

<ul>
<li><a href="#">Кнопка<span></span></a></li>
<li><a href="#">Кнопка<span></span></a></li>
<li><a href="#">Кнопка<span></span></a></li>
</ul>

@keyframes men{
	from{
		  background: linear-gradient(120deg, #CFA883 10%, white 20%, white 20%, #CFA883 30%);
		  opacity:0;
		}
	to {
		background-position:300px;
		opacity:1;
		}
}
ul{
	border:1px black solid;
}
li{
	display:inline;
}
li a{
	display:inline-block;
	text-decoration:none;
	background:red;
	padding:13px 10px;
	text-align:center;
	width:10%;
	position:relative;
	z-index:100;
	overflow:hidden;
	vertical-align:top;
	transition: all .5s;
}
span{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:300px;
	z-index:-1;
}
a:hover span{
	animation: men .5s;
}
a:hover{
	background:#CFA883;
	color:white;
}

 

Edited November 11, 2016 by aqua.77