.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;
}
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
