จะสร้างแถบเมนูโดยใช้ CSS ควบคุมให้เป็นอย่างที่ต้องการได้หรือไม่ครับ ??

<style type="text/css">
	.link {padding:10px 15px; background:#00F; color:#FFF;}
	.link:hover {background:#F00; color:#FF0; cursor: pointer;}
</style>

<a class="link">ลองเอาเม้าส์ชี้ดูสิ</a>

<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<style type="text/css">
.link {padding:10px; background:#ffffff; border:#CCC 1px solid; width:60px; text-align:center; color:#999; text-decoration:none;}
a div.link p {padding:0; margin:0;text-decoration:none;}
.link:hover {background:#09F; color:#FFF;}
</style>

<a href="#">
	<div  class="link">
    <i class="fa fa-camera-retro fa-2x"></i>
    <p>Test</p>
    </div>
</a>