Membuat Icon Button Multi Guna Dengan CSS3

Membuat Icon Button Multi Guna Dengan CSS,itulah yang akan saya bahas pada kesempatan kali ini,button ini mempunyai banyak fungsi yang bisa sobat gunakan unutk memperindah tampilan blog ,gimana tertarik bukan ya udah langsung aja ikuti tutorialnya di bawah ini.

ini CSS3 Code Snippet 

 

 .my-button {
 text-transform:capitalize;
 cursor:pointer;
 padding:7px 15px;
 margin:7px 0 0;
 line-height:25px;
 display:inline-block;
 border:none;
 color:#fff;
 font-weight:bold;
 -webkit-text-shadow:0 -1px 0 rgba(0,0,0,0.2);
 -moz-text-shadow:0 -1px 0 rgba(0,0,0,0.2);
 text-shadow:0 -1px 0 rgba(0,0,0,0.2);
}
.my-button:hover { color:#fff; }
.small,.small:hover {
 line-height:12px;
 font-size:11px;
 -webkit-box-shadow:0 -5px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 -moz-box-shadow:0 -5px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 box-shadow:0 -5px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.3) inset;
}
.medium,.medium:hover {
 line-height:18px;
 font-size:13px;
 -webkit-box-shadow:0 -10px 10px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 -moz-box-shadow:0 -10px 10px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 box-shadow:0 -10px 10px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
}
.large,.large:hover {
 line-height:24px;
 font-size:14px;
 padding:9px 17px;
 -webkit-box-shadow:0 -10px 15px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 -moz-box-shadow:0 -10px 15px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 box-shadow:0 -10px 15px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
}
.blue {
 background-color:#01afe7;
 border:1px solid #009bcd;
}
.blue:hover {
 background-color:#15c6ff;
}
.slate {
 background-color:#838B8E;
 border:1px solid #767c7f;
}
.slate:hover {
 background-color:#939c9f;
}
.pink {
 background-color:#ea3271;
 border:1px solid #d72160;
}
.pink:hover {
 background-color:#FD5D94;
}
.lamb {
 background-color:#e6c470;
 border:1px solid #d5b462;
}
.lamb:hover {
 background-color:#F7D683;
}
.red {
 background-color:#D54336;
 border:1px solid #c5392c;
}
.red:hover {
 background-color:#f4695d;
}
.green {
 background-color:#8EC63F;
 border:1px solid #79ab34;
}
.green:hover {
 background-color:#a5e151;
}
.terra {
 background-color:#ef6658;
 border:1px solid #ec6a5d;
}
.terra:hover {
 background-color:#ff7f72;
}
.grey {
 background-color:#bdbdbd;
 border:1px solid #acacac;
}
.grey:hover {
 background-color:#CFCFCF;
}
.brown {
 background-color:#b0a066;
 border:1px solid #998b57;
}
.brown:hover {
 background-color:#C5B475;
}
.dark {
 background-color:#457D97;
 border:1px solid #35667c;
}
.dark:hover {
 background-color:#5695b3;
}
.white {
 background-color:#dddddd;
 border:1px solid #c7c7c7;
 color:#555;
}
.white:hover {
 background-color:#eee;
}
.black {
 background-color:#555;
 border:1px solid #333;
}
.black:hover {
 background-color:#757575;
}
.purple {
 background-color:#c215d5;
 border:1px solid #790186;
}
.purple:hover {
 background-color:#e034f3;
}
.orange {
 background-color:#FC9B0F;
 border:1px solid #e58700;
}
.orange:hover {
 background-color: #fcc10f;
}
.my-button span {
 float:left;
 display:inline-block;
 margin-top:3px;
 margin-right:5px;
}

 

1. Login terlebih dahulu ke akun blog sobat.
2. Pilih menu Template > Edit HTML
3. cari kode ]]></b:skin> dan letakan kode snippet di atas kode ]]></b:skin>.


Langkah pertama sudah selesai sekarang giliran cara pemasangan dalam widget

1. Pilih Tata Letak > Add Gadget > HTML/Javascript
2. Copy kode di bawah dan letakan pada kolom konten HTML,dan pilih salah satu sesuai kebutuhan sobat.

<a class="my-button medium blue" href="#"><img alt="" src="images/btn_info.png" />Information</a>
<a class="my-button medium green" href="#"><img alt="" src="images/btn_ok.png" />Success</a>
<a class="my-button medium orange" href="#"><img alt="" src="images/btn_warning.png" />Warning</a>
<a class="my-button medium red" href="#"><img alt="" src="images/btn_error.png" />Error</a>
<a class="my-button medium black" href="#"><img alt="" src="images/btn_add.png" />Add New</a>

<a class="my-button medium green" href="#"><img alt="" src="images/btn_down.png" />Download</a>
<a class="my-button medium purple" href="#"><img alt="" src="images/btn_up.png" />Upload</a>
<a class="my-button medium dark" href="#"><img alt="" src="images/btn_help.png" />Help</a>
<a class="my-button medium terra" href="#"><img alt="" src="images/btn_delete.png" />Delete</a>

Keterangan :
pada tanda # ganti dengan url Link sobat