Membuat Button Live Demo dan Download Dengan CSS3 dan Awesome Font

Biasa nemu di blog tetanggal buat koleksi gue men, oke pertama-tama kita lihat dulu Demo nya oke lagian bagus ini kok


Gimana baguskan langsung saja Tutorialnya :

Kalian cari ]]></b:skin> lalu masukan kode dibawah ini diatas nya, tepat diatasnya :


.buttong{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}

.buttong li{display:inline;margin:0;padding:0;}

.buttong li a{display:inline-block;height:30px;margin:auto 
5px;line-height:32px;width:120px;color:#444 
!important;font-size:12px;border:1px solid 
#dcdcdc;border-color:rgba(0,0,0,.1);background-color:#f5f5f5;background-image:-webkit-gradient(linear,left
 top,left 
bottom,from(#f5f5f5),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-ms-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-o-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:linear-gradient(top,#f5f5f5,#f1f1f1);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;cursor:default
 
!important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}

.awesbutton li a:hover{border-color:#c6c6c6;-webkit-box-shadow:0 1px 1px 
rgba(0,0,0,.1);-moz-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px
 1px rgba(0,0,0,.1);color:#222 !important;}
.awesbutton{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}

.awesbutton li{display:inline;margin:0;padding:0;}

.awesbutton li a{padding:7px 20px;margin:auto 
5px;font-size:13px;font-weight:bold;cursor:pointer;border-radius:2px;border:1px
 solid #ccc;text-shadow:1px 1px 0 #fff;color:#555 
!important;background:#fff;background:-webkit-gradient(linear, left top,
 left bottom, from(#fff), 
to(#f2f2f2));background:-webkit-linear-gradient(top, #fff, 
#f2f2f2);background:-moz-linear-gradient(top, #fff, 
#f2f2f2);background:-ms-linear-gradient(top, #fff, 
#f2f2f2);background:-o-linear-gradient(top, #fff, #f2f2f2);box-shadow:0 
1px 2px #ddd;}

.awesbutton li a:hover{border-color:#bbb;-webkit-box-shadow:0 1px 1px 
rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px
 1px rgba(0,0,0,.2);color:#111 !important;}

Cari kode </head> letakan kode ini tepat diatasnya :
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
Sesudah itu coba kalian cek, Tombol ini memakai fungsi <ul> dan <li> contoh :

<div style="text-align: center;">

<ul class="button">

<li><a href="#" target="_blank">Live Demo</a></li>

<li><a href="#" target="_blank">Download</a></li>

</ul>

</div>

<div class="clear" />

Nah itu kan Tombol Versi Google sekarang Tombol Versi Awesome


<div style="text-align: center;">

<ul class="awesbutton">

<li><a <b>href="#"</b> target="_blank"><i 
class="icon-eye-open"></i> Live Demo</a></li>

<li><a <b>href="#"</b> target="_blank"><i 
class="icon-link"></i> Download</a></li>

</ul>

</div>

<div class="clear" /> 
Title: Membuat Button Live Demo dan Download Dengan CSS3 dan Awesome Font
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Writed by Indra Gunanda

Komentarlah Dengan Sopan