Article Page

Button With Image

Image Button
Input Blog

Membuat tombol dengan menggunakan gambar seperti contoh tombol link dibawah

1st, download tombol PNG dan PSG di-link diatas dan extract disatu tempat dengan code dibawah.
2nd, siapkan notepad atau notepad++, copas kode berikut, save as Terserah_Kamu.HTM . Code dan image tombol yang digunakan disimpan dalam satu folder.

Button Image Code

<html>
<head>
<style>
.button {display:block;
/*1*/    width:180px;     
/*2*/    height:50px;     
         text-indent:-9999px;}
.button a {display:block;
           width:100%;
           height:100%;
/*3*/      background:url(Paste URL Gambar Disini)
           no-repeat top left;          
           outline:none;}
.button a:hover {
/*4*/            background-position:0 -50px;}
.button a:active {
/*5*/             background-position:0 -100px;}
</style>
</head>
<body>
      <p class="button">
      <a href="#null">Button</a></p>
</body>
</html>

Keterangan :
/* 1*/ adalah ukuran lebar dari image
/* 2*/ adalah tinggi image di-bagi 3
/* 3*/ ini adalah alamat image
/* 4*/ keadaan dimana cursor berada diatas tombol atau Link
/* 5*/ keadaan saat kita menekan atau mengklik mouse.

kenapa /* 4*/ -50 ? ukuran tinggi image dibagi 3 atau sama dengan 50 x 3 = 150px yang artinya saat keadaan normal yg terlihat adalah 1px sampai dengan 50px, saat cursor berada diatas tombol, gambar akan berganti posisi ke -50px sampai 100px dan seterusnya.

Sedikit tambahan, untuk membuat tombol kalian bisa gunakan Photoshop atau program sejenisnya. Untuk besar kecil tombol disesuaikan ukurannya. bisa kan menyesuaikannya??? Tapi menurut saya dari pada cape-cape bikin tombol trus hasilnya kurang Wah..., baiknya download tombol dalam format PSD di-google dan lakukan sedikit pengeditan, Selesai

Atau mungkin ada yang mau mencoba membuat tombol dengan menggunakan CSS3 Code Generator Tool ? tanpa menggunakan image sebagai background, hanya mengimplementasikan code-code CSS3, hasil, loading lebih cepat karena imageless atau tanpa gambar. MAU ? Click Disni

Bagaimana cara menempatkan tombol diatas di-Blog ?

1st, upload gambar Tombol Format PNG kamu ke WEB ( Photobucket atau langsung upload di albume google kamu, serah kamu enaqnya gmn yg penting itu tombol ada di web ^^ ).

2nd, Copy url gambar tombol yang sudah kamu upload, atau kamu bisa menggunakan url gambar yang sudah saya upload (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0oAzTUF9J_o1puFhD7Nd46svSqBeJ7vehFcKk1MHD2loMUezz-b6DQula4wEYZal8aslieX8m36rGHgJaIJFcuCC4tmNvhDg6-NMBHlUBz11noOdphV0B72NwutOK3BelS_SSTB3hPk/)
Code yang digunakan kira" seperti berikut:

Button Image Style Code

.button a {display:block;
           width:100%;
           height:100%;
           background:url(Paste URL Gambar Disini)
           no-repeat top left;  
           outline:none;}
.button a:hover {background-position:0 -50px;}
.button a:active {background-position:0 -100px;}

3th, Pastekan code diatas di-
- Template / Sesuaikan / Tingkat Lanjut / Tambah CSS / Simpan. atau
- Template / edit HTML / paste-kan diatas code ]]></b:skin> / Simpan.

4th, Masuk bagian Pos / New Entri atau Edit Entri / HTML / Pastekan code dibawah / Pratinjau atau Simpan/>

Button Image Pos Code

<div class="button"
     style="display:block;
            width:180px;
            height:50px;
            text-indent:-9999px;">
    <a href="#null"
             imageanchor="1"
      style="clear: left;
             float: left;
             margin-bottom: 1em;
             margin-right: 1em;">
             </a></div>

Note :
Untuk penambahan jenis tombol bisa kamu lakukan dengan menambah CSS di Perancangan Template Bloger dengan menggunakan Class atau ID yang berbeda.
Satu lagi tombol tidak akan kelihatan di menu COMPOSE, tombol terlihat jika kamu lakukan Pratinjau atau melakukan pembaruan. Jadi pengeditan tombol hanya bisa dilakukan di HTML.

LINKNAME LINKNAME

LINKNAME LINKNAME

LINKNAME LINKNAME LINKNAME LINKNAME

LINKNAME LINKNAME LINKNAME LINKNAME

1st, Pastekan all code di-tab sebelah ( Style Code ) di-
- Template / Sesuaikan / Tingkat Lanjut / Tambah CSS / Simpan. atau
- Template / edit HTML / paste-kan diatas code ]]></b:skin> / Simpan

Code Ukuran Besar

<a class="buttonbubble big blue" href="LINK">LINKNAME</a>
<a class="buttonbubble big green" href="LINK">LINKNAME</a>
<a class="buttonbubble big orange" href="LINK">LINKNAME</a>
<a class="buttonbubble big gray" href="LINK">LINKNAME</a>

Code Ukuran Medium

:<a class="buttonbubble blue medium" href="LINK">LINKNAME</a>
<a class="buttonbubble green medium" href="LINK">LINKNAME</a>
<a class="buttonbubble orange medium" href="LINK">LINKNAME</a>
<a class="buttonbubble gray medium" href="LINK">LINKNAME</a>

Code Ukuran Kecil

<a class="buttonbubble small blue" href="LINK">LINKNAME</a>
<a class="buttonbubble small green" href="LINK">LINKNAME</a>
<a class="buttonbubble small orange" href="LINK">LINKNAME</a>
<a class="buttonbubble small gray" href="LINK">LINKNAME</a>

Basic Code

.buttonbubble{ font:15px Calibri, Arial, sans-serif;
 text-shadow:1px 1px 0 rgba(255,255,255,0.4);
 text-decoration:none !important;
 white-space:nowrap;
 display:inline-block;
 vertical-align:baseline;
 position:relative;
 cursor:pointer;
 padding:10px 20px;
 background-repeat:no-repeat;
 background-position:bottom left;
 background-image:url(
 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png');
 background-position:bottom left, top right, 0 0, 0 0;
 background-clip:border-box;
 
 /* Border Radius */
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
 
 /* Border Shadows */
    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;
 
/* Border Shadows */
   -webkit-transition:background-position 1s;
   -moz-transition:background-position 1s;
   transition:background-position 1s;}
   
.buttonbubble:hover { background-position:top left;
                      background-position:top left, bottom right, 0 0, 0 0; }
       
.buttonbubble:active {  bottom:-1px; }

/* The three buttons sizes */
.buttonbubble.big { font-size:30px;}
.buttonbubble.medium { font-size:18px;}
.buttonbubble.small { font-size:13px;}

Blue Button

/* Blue Button */
.blue.buttonbubble{ color:#0f4b6d !important;
 border:1px #84acc3 !important;
 background-color: #48b5f2;
 background-image: 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'),
 -moz-radial-gradient( center bottom, circle,
 rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
 -moz-linear-gradient(#4fbbf7, #3faeeb);
 background-image: 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'),
 -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
 from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); }

.blue.buttonbubble:hover{  background-color:#63c7fe;
 background-image: 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'),
 -moz-radial-gradient( center bottom, circle,
 rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
 -moz-linear-gradient(#63c7fe, #58bef7);
 background-image: 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'),
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'),
 -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
 from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));}

Green Button

/* Green Button */
.green.buttonbubble{ color:#345903 !important;
 border:1px #96a37b !important;
 background-color: #79be1e;
 background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),
 -moz-linear-gradient(#82cc27, #74b317); background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
 from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));}

.green.buttonbubble:hover{ background-color:#89d228;
 background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),
 -moz-linear-gradient(#90de31, #7fc01e); background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'),
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
 from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e)); }

Orange Button

/* Orange Button */
.orange.buttonbubble{  color:#693e0a !important;
 border:1px #bea280 !important;
 background-color: #e38d27;
 background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'),
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),
 -moz-linear-gradient(#f1982f, #d4821f);background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
 from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f)); }

.orange.buttonbubble:hover{ background-color:#ec9732;
 background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),
 -moz-linear-gradient(#f9a746, #e18f2b); background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
 from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));}

Gray Button

/* Grey Button */
.gray.buttonbubble{  color:#525252 !important;
 border:1px #a5a5a5 !important;
 background-color: #a9adb1;
 background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),
 -moz-linear-gradient(#c5c7ca, #92989c); background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
 from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));}

.gray.buttonbubble:hover{  background-color:#b6bbc0;
 background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),
 -moz-linear-gradient(#d1d3d6, #9fa5a9); background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDtsi-AzHDFtzl29NlEKz32j16FLg3IV4eMBN4J4xpMPDahz9XgnPdtxFZ5s50H4yoHTF7XYgIx0RkxnqHTUDKs7wQt_pJN_UVIi_wAjAlWKb-ZLTgbprmPkenyeWFMX16uwIGlg1Hw/s144/button_bubble.png'), 
 -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
 from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));}

Welcome - GarelliaPahlevi.Blogspot.COM

About

Article

Tugas Kampus

Software

Entertain

Private

Button With Image

Bubble Button CSS3

Welcome - GarelliaPahlevi.Blogspot.COM

About Article Tugas Kampus Software Entertain Private

Button With Image

Bubble Button CSS3

About

Article

Tugas Kampus

Software

Entertain

Private