Cara Membuat Tombol Cantik Dengan CSS3 | Selamat Siang Kawan blogger, Kali ini saya ingin memberi sedikit tips tentang CSS3, dan postingan kali ini seputar Button/Tombol Link, dan tombol link ini sedikit di modifikasi dengan script CSS3 sehingga tampilannya agak sedikit menarik, sedikit penjelasan bahwa tombol ini memang memiliki gambar, namun formatnya tidak seperti JPG,PNG dll ..
Add Edit Delete Save Email -> Dengan Gambar
1. Login Blogger
2. Pilih Tabs "Rancangan" -> Pilih "Edit HTML" -> Cek "Expand Template Widget"
3. Cari kode ]]></b:skin>
4. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
.buttons{
display: inline-block;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
border: 1px solid #a1a1a1;
padding: 0 2em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
}
.buttons:before{
float: left;
width: 1em;
text-align: center;
font-size: 1.7em;
margin: 0 0.5em 0 -1em;
padding: 0 .2em;
pointer-events: none;
}
/*Form Buttons*/
.add:before { content: "\271A"; }
.edit:before { content: "\270E"; }
.delete:before { content: "\2718";}
.save:before { content: "\2714";}
.email:before { content: "\2709";}
.cross:before { content: "\2716"; }
/*Currency*/
.dollar:before { content:"\0024"; }
.euro:before { content:"\20AC"; }
.pound:before { content: "\00A3"; }
.cent:before { content: "\20B5"; }
/*Temp*/
.celsius:before { content: "\2103"; }
.fahrenheit:before { content: "\2109"; }
/*Math & Factions*/
.pi:before { content: "\213C"; }
.one_thrid:before { content: "\2153"; }
.two_thrid:before { content: "\2154"; }
.one_fifth:before { content: "\2155"; }
.two_fifth:before { content: "\2156"; }
.three_fifth:before { content: "\2157"; }
.four_fifth:before { content: "\2158"; }
.one_sixth:before { content: "\2159"; }
.five_sixth:before { content: "\215A"; }
.one_eighth:before { content: "\215B"; }
.three_eighth:before { content: "\215C"; }
.five_eighth:before { content: "\215D"; }
.seven_eighth:before { content: "\215E"; }
.quarter:before { content: "\00BC"; }
.half:before { content: "\00BD"; }
.three_quarter:before { content: "\00BE"; }
/*Arrows*/
.next:before { content: "\279C"; }
.left_arrow:before { content: "\2190"; }
.up_arrow:before { content: "\2191"; }
.right_arrow:before { content: "\2192"; }
.down_arrow:before { content: "\2193"; }
.up_left_arrow:before { content: "\2196"; }
.up_right_arrow:before { content: "\2197"; }
.down_left_arrow:before { content: "\2199"; }
.down_right_arrow:before { content: "\2198"; }
/*Symbols*/
.like:before { content: "\2764"; }
.star:before { content: "\2605"; }
.spark:before { content: "\2737"; }
.play:before { content: "\25B6"; }
.watch:before { content: "\231A"; }
.blacksun:before { content: "\2600"; }
.cloud:before { content: "\2601"; }
.umbrella:before { content: "\2602"; }
.snowman:before { content: "\2603"; }
.blackstar:before { content: "\2605"; }
.whitestar:before { content: "\2606"; }
.blackphone:before { content: "\260E"; }
.whitephone:before { content: "\260F"; }
.saltire:before { content: "\2613"; }
.hot_drink:before { content: "\2615"; }
.skull:before { content: "\2620"; }
.radioactive:before { content: "\2622"; }
.biohazard:before { content: "\2623"; }
.peace:before { content: "\262E"; }
.yingyang:before { content: "\262F"; }
.frowning_face:before { content: "\2639"; }
.smiling_face:before { content: "\263A"; }
.first_quarter_moon:before { content: "\263D"; }
.last_quarter_moon:before { content: "\263E"; }
.wheelchair:before { content: "\267F"; }
.recycle:before { content: "\267D"; }
.recycle2:before { content: "\267C"; }
.music_note:before { content: "\266C"; }
.warning:before { content: "\26A0"; }
.male_and_female:before { content: "\26A4"; }
.scissors:before { content: "\2701"; }
.airplane:before { content: "\2708"; }
.snow:before { content: "\2042"; }
5. Klik "Simpan Template"
6. Selesai.
Perhatian : pada script di atas ada kata berwarna Merah dan Biru, anda pilih salah satu kata itu, lalu anda terapkan pada link seperti di bawah ini
/*Form Buttons*/
/*Currency*/
/*Temp*/
/*Math & Factions*/
/*Arrows*/
/*Symbols*/
Nah Sekarang tinggal anda coba pada postingan atau bisa juga pada widget yang di beri link, lumayan kan sedikit ilmu buat mempercantik blog atau website anda,
Oke Selamat Mencoba ..!!
BIAR LEBIH JELAS LAGI LIHAT DEMO DI BAWAH INI
Add Edit Delete Save Email -> Dengan Gambar
Kalau anda tertarik dan ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini :
1. Login Blogger
2. Pilih Tabs "Rancangan" -> Pilih "Edit HTML" -> Cek "Expand Template Widget"
3. Cari kode ]]></b:skin>
4. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
.buttons{
display: inline-block;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
border: 1px solid #a1a1a1;
padding: 0 2em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
}
.buttons:before{
float: left;
width: 1em;
text-align: center;
font-size: 1.7em;
margin: 0 0.5em 0 -1em;
padding: 0 .2em;
pointer-events: none;
}
/*Form Buttons*/
.add:before { content: "\271A"; }
.edit:before { content: "\270E"; }
.delete:before { content: "\2718";}
.save:before { content: "\2714";}
.email:before { content: "\2709";}
.cross:before { content: "\2716"; }
/*Currency*/
.dollar:before { content:"\0024"; }
.euro:before { content:"\20AC"; }
.pound:before { content: "\00A3"; }
.cent:before { content: "\20B5"; }
/*Temp*/
.celsius:before { content: "\2103"; }
.fahrenheit:before { content: "\2109"; }
/*Math & Factions*/
.pi:before { content: "\213C"; }
.one_thrid:before { content: "\2153"; }
.two_thrid:before { content: "\2154"; }
.one_fifth:before { content: "\2155"; }
.two_fifth:before { content: "\2156"; }
.three_fifth:before { content: "\2157"; }
.four_fifth:before { content: "\2158"; }
.one_sixth:before { content: "\2159"; }
.five_sixth:before { content: "\215A"; }
.one_eighth:before { content: "\215B"; }
.three_eighth:before { content: "\215C"; }
.five_eighth:before { content: "\215D"; }
.seven_eighth:before { content: "\215E"; }
.quarter:before { content: "\00BC"; }
.half:before { content: "\00BD"; }
.three_quarter:before { content: "\00BE"; }
/*Arrows*/
.next:before { content: "\279C"; }
.left_arrow:before { content: "\2190"; }
.up_arrow:before { content: "\2191"; }
.right_arrow:before { content: "\2192"; }
.down_arrow:before { content: "\2193"; }
.up_left_arrow:before { content: "\2196"; }
.up_right_arrow:before { content: "\2197"; }
.down_left_arrow:before { content: "\2199"; }
.down_right_arrow:before { content: "\2198"; }
/*Symbols*/
.like:before { content: "\2764"; }
.star:before { content: "\2605"; }
.spark:before { content: "\2737"; }
.play:before { content: "\25B6"; }
.watch:before { content: "\231A"; }
.blacksun:before { content: "\2600"; }
.cloud:before { content: "\2601"; }
.umbrella:before { content: "\2602"; }
.snowman:before { content: "\2603"; }
.blackstar:before { content: "\2605"; }
.whitestar:before { content: "\2606"; }
.blackphone:before { content: "\260E"; }
.whitephone:before { content: "\260F"; }
.saltire:before { content: "\2613"; }
.hot_drink:before { content: "\2615"; }
.skull:before { content: "\2620"; }
.radioactive:before { content: "\2622"; }
.biohazard:before { content: "\2623"; }
.peace:before { content: "\262E"; }
.yingyang:before { content: "\262F"; }
.frowning_face:before { content: "\2639"; }
.smiling_face:before { content: "\263A"; }
.first_quarter_moon:before { content: "\263D"; }
.last_quarter_moon:before { content: "\263E"; }
.wheelchair:before { content: "\267F"; }
.recycle:before { content: "\267D"; }
.recycle2:before { content: "\267C"; }
.music_note:before { content: "\266C"; }
.warning:before { content: "\26A0"; }
.male_and_female:before { content: "\26A4"; }
.scissors:before { content: "\2701"; }
.airplane:before { content: "\2708"; }
.snow:before { content: "\2042"; }
5. Klik "Simpan Template"
6. Selesai.
LIHAT CARA PEMASANGANNYA
Perhatian : pada script di atas ada kata berwarna Merah dan Biru, anda pilih salah satu kata itu, lalu anda terapkan pada link seperti di bawah ini
<a href="link yang ingin di tuju" class="buttons add">Add</a>
<a href="link yang ingin di tuju" class="buttons like">Like</a>
GAMBAR DI BAWAH INI ADALAH PREVIEWNYA
(UNTUK MEMPERBESAR KLIK GAMBAR)
(UNTUK MEMPERBESAR KLIK GAMBAR)
/*Form Buttons*/
/*Currency*/
/*Temp*/
/*Math & Factions*/
/*Arrows*/
/*Symbols*/
Nah Sekarang tinggal anda coba pada postingan atau bisa juga pada widget yang di beri link, lumayan kan sedikit ilmu buat mempercantik blog atau website anda,
Oke Selamat Mencoba ..!!
Ditulis Oleh : SyariĆ’™ ~ Tips dan Trik Blogspot
Sobat sedang membaca artikel tentang Cara Membuat Tombol Cantik Dengan CSS3 | Mempercantik Blog. TuTorial Ku UnTuK Mu™ Memperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
follow back uyah gan..
BalasHapuskren blog na..
Oke akan ane folback..
BalasHapusTerima kasih ya Sudah mau berkunjung ^_~d
Malaikatnya jelek.... hancur sudah dunia
BalasHapus