Cara Membuat Tombol Cantik Dengan CSS3 | Mempercantik Blog ~ TuTorial Ku UnTuk Mu

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

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

GAMBAR DI BAWAH INI ADALAH PREVIEWNYA
(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

<a href="http://sariptrik.blogspot.com/2012/07/cara-membuat-tombol-cantik-dengan-css3.html" target="_blank">Cara Membuat Tombol Cantik Dengan CSS3 | Mempercantik Blog</a>