Tutorial Circle Navigation With Hover

This is how it looks like <3

Tutorial Circle Navigation With Hover

Assalamualaikum,lepas penat beraya,terus mengadap laptop,ingat nak bagi freebies header tadi,tapi 'ter' buat navigation pulak -.-,nampak tak kemurah hatian aku ? Lololol.Untuk pengetahuan,ni tutorial navigation yang kedua aku buat selepas yang ini {click}.STP,kalau ada yang berminat boleh terus follow step by step tuto kat bawah <3.

LIVE PREVIEW:

Home
About
Tutorial
Freebies

1. TEMPLATE DESIGNER: Blogger > Layout > Add a gadget > HTML/Javascript
2. BLOGSKIN :  Paste atas </style>

a.circle{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:2px;
display:inline-block;
text-align:center;
background: #eee;
color:#000;
font-family:calibri;
text-transform:uppercase;
font-size:11px;
width:60px;height:35px;
border:5px solid pink;
padding:5px;
border-radius:50%;
}
a.circle:hover{
text-align:center;
color: #fff;
font-size:11px;
border:5px solid white;
background: pink;
-moz-box-shadow: 0 0 5px 5px #eee;
-webkit-box-shadow: 0 0 5px 5px #eee;
box-shadow: 0 0 5px 5px #eee;
-webkit-transform: scale( -1.0) rotate( 540deg);
-moz-transform: scale( -1.0) rotate( 540deg);}
</style>
<a class="circle" href="lINK/URL"><br />Home</a>
<a class="circle" href="lINK/URL"><br />About</a>
<a class="circle" href="lINK/URL"><br />Tutorial</a>
<a class="circle" href="lINK/URL"><br />Freebies</a></div>

P/s: Kalau ada yang RE-TUTO,tolong letak credit!

 CP by : Adam Faiz