Tutorial Button Navigation

ASSALAMUALAIKUM

Hari  khamis ni dah raya kan? lol.Bulan puasa ni memang bosan kan? tak tahu nak buat apa.tadi try main campak-campak koding kat HTML editor,and tak sangka pulak jadi button navi ni,kahkah -.-.For your information,this is my own codes,kalau ada yang guna,tolong creditkan bole? kalau taknak pun takpe,but better cedit :'3

LIVE PREVIEW:

about tutorial freebies

1. TEMPLATE DESIGNER:  Blogger > layout > Add a gadget > HTML Javascript
2. BLOGSKIN: Template > </style>

.graybutton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f5f5f5), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #f5f5f5 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ededed');
background-color:#f5f5f5;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:calibri;
text-transform: uppercase;
font-size:12px;
font-weight:bold;
padding:6px 50px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
width:50px;
display:inline-block;
margin:2px;
text-align:center;
}
.graybutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #f5f5f5) );
background:-moz-linear-gradient( center top, #ededed 5%, #f5f5f5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#f5f5f5');
background-color:#ededed;
}
.graybutton:active {
position:relative;
top:1px;
}
</style>
<a class="graybutton" href="LINK URL">about</a>
<a class="graybutton" href="LINK URL">tutorial</a>
<a class="graybutton" href="LINK URL">freebies</a>
</div> 

 

 CP by : Adam Faiz