Tutorial Rotate Navigation

Monday, August 12, 2013

molang | Tumblr
This is how it looks like:
Tutorial Rotate Navigation
live preview:
Home About Tutorial freebies
  1. TEMPLATE DESIGNER: Blogger > Layout > Add a Gadget > HTML/Javascript
  2. BLOGSKIN: Edit HTML > Paste atas </style>
rotate {
font-family: calibri;
letter-spacing: 1px;
font-size: 11px;
line-height: 13px;
display: inline-block;
background: #eee;
border: 2px solid pink;
color: #000000;
width: 110px;
padding: 5px;
margin: 1px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
rotate:hover {
font-family: calibri;
letter-spacing: 1px;
font-size: 11px;
line-height: 13px;
display: inline-block;
background: pink ;
border: 2px solid white;
 color: #fff;
-webkit-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    -ms-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    }
</style>
<center>
<a href="LINK/URL"><rotate>Home</navi></a>
<a href="LINK/URL"><rotate>About</navi></a>
<a href="LINK/URL"><rotate>Tutorial</navi></a>
<a href="LINK/URL"><rotate>freebies</navi>
</a>
</center>


You Might Also Like

5 Like This Entry: