Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover .

SEE DEMO

CSS

.items{
  margin-top:50px;
}
.items li{
  float:left;
  padding:20px 35px 20px 35px;
  list-style:none;
  border:5px solid rgba(255,255,255,0.2);
  margin-left:10px;
  -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4)));
}
.items li:hover{
  border:5px solid rgba(255,255,255,1);
  -webkit-transition:all ease-in 0.3s;/*Chrome*/
  -moz-transition:all ease-in 0.3s;/*Firefox*/
  -o-transition:all ease-in 0.3s;/*Opera*/
  -ms-transition:all ease-in 0.3s;/*Microsoft*/
}
.items li a{
  color:#FFF;
  text-decoration:none;
  font-family:"Oswald";
  text-transform:uppercase;
  font-size:14px;
}
.small{
  font-size:12px;
  color:#999;
}

HTML

<ul class="items"> 
    <li><a href="#">Satu</a></li>
    <li><a href="#">Dua</a></li>
    <li><a href="#">Tiga</a></li>
    <li><a href="#">Empat</a></li>
    <li><a href="#">Dan</a></li>
    <li><a href="#">Lima</a></li>
  </ul>

Penjelasan dalam pemasangan brada cari kode ]]></b:skin> Atau </style> , tempatkan CSS kode diatasnya, kode HTML bisa brada tempatkan dimana suka.

Resource : http://codepen.io/search?q=blood&limit=all&depth=everything