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 :
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
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Writed by Indra Gunanda
Komentarlah Dengan Sopan