Home » » Membuat Icon Button Multi Guna Dengan CSS3

Membuat Icon Button Multi Guna Dengan CSS3

Pada hari ini taukahbahwa.blogspot.com akan menyampaikan artikel tentang Membuat Icon Button Multi Guna Dengan CSS3. Semoga dengan artikel Membuat Icon Button Multi Guna Dengan CSS3 akan menambah wawasan untuk anda pembaca setia taukahbahwa.blogspot.com

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

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

Sobat baru saja membaca artikel yang berkategori Informasi dengan judul Membuat Icon Button Multi Guna Dengan CSS3. Jika sobat rasa artikel ini menarik silakan di share dengan meninggalkan URL http://taukahbahwa.blogspot.com/2014/02/membuat-icon-button-multi-guna-dengan.html. Terima kasih atas kunjungannya!

0 komentar:

Posting Komentar