Membuat Tombol Download Gelembung di blog Efek buble pada Link download



Halo teman ! Kali ini saya akan membahas sedikit tutorial bagaimana membuat link download dengan gelembung pada blog. Untuk kalian yang mungkin punya blog dengan niche download pasti ingin tampilan blognya keren kan ?  nah untuk itu saya mencoba membuat sebuah modifikasi tombol dengan CSS3.  Alhasil saya mendapatkan sebuah modifikasi Link download menggunakan efek gelembung pada saat kursor diarahkan ke tombol untuk contoh lihat dibawah ini:

download






Oke sobat untuk membuatnya Langsung saja ya
1. Pertama Masuk ke TEMPLATE lalu EDIT TEMPLATE
2. Cari TAG </.body> Dan masukan script di bawah ini tepat diatasnya


 <style type="text/css">
*{
margin:0;
padding:0;
}
.button{
font:15px Calibri, Arial, sans-serif;

/* A semi-transparent text shadow */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);

/* Overriding the default underline styling of the links */
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;

background-repeat:no-repeat;

/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */

background-position:bottom left;
background-image:url('button_bg.png');

/* Multiple backgrounds version. The background images
are defined individually in color classes */

background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;

/* Applying a default border raidus of 8px */

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

/* A 1px highlight inside of the button */

-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;

/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */

-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}

.button:hover{

/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/

background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
/* Moving the button 1px to the bottom when clicked */
bottom:-1px;
}

/* The three buttons sizes */

.button.big { font-size:30px;}.blue.button{
color:#fff !important;

border:1px solid #84acc3 !important;

/* A fallback background color */
background-color: #48b5f2;

/* Specifying a version with gradients according to */

background-image: url(https://2.bp.blogspot.com/-ZM4XrWWfgPU/XEhuTc8lVpI/AAAAAAAAAM0/pSXwzD8u7nUoP9rNWzU__VDKxJmgxeRgQCLcBGAs/s1600/button_bg.png), url(https://2.bp.blogspot.com/-ZM4XrWWfgPU/XEhuTc8lVpI/AAAAAAAAAM0/pSXwzD8u7nUoP9rNWzU__VDKxJmgxeRgQCLcBGAs/s1600/button_bg.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://2.bp.blogspot.com/-ZM4XrWWfgPU/XEhuTc8lVpI/AAAAAAAAAM0/pSXwzD8u7nUoP9rNWzU__VDKxJmgxeRgQCLcBGAs/s1600/button_bg.png), url(https://2.bp.blogspot.com/-ZM4XrWWfgPU/XEhuTc8lVpI/AAAAAAAAAM0/pSXwzD8u7nUoP9rNWzU__VDKxJmgxeRgQCLcBGAs/s1600/button_bg.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.button:hover{
background-color:#63c7fe;

background-image: url(https://2.bp.blogspot.com/-ZM4XrWWfgPU/XEhuTc8lVpI/AAAAAAAAAM0/pSXwzD8u7nUoP9rNWzU__VDKxJmgxeRgQCLcBGAs/s1600/button_bg.png), url(https://2.bp.blogspot.com/-ZM4XrWWfgPU/XEhuTc8lVpI/AAAAAAAAAM0/pSXwzD8u7nUoP9rNWzU__VDKxJmgxeRgQCLcBGAs/s1600/button_bg.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://2.bp.blogspot.com/-ZM4XrWWfgPU/XEhuTc8lVpI/AAAAAAAAAM0/pSXwzD8u7nUoP9rNWzU__VDKxJmgxeRgQCLcBGAs/s1600/button_bg.png), url(https://2.bp.blogspot.com/-ZM4XrWWfgPU/XEhuTc8lVpI/AAAAAAAAAM0/pSXwzD8u7nUoP9rNWzU__VDKxJmgxeRgQCLcBGAs/s1600/button_bg.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));
}

</style>

3. Save template kemudian Masukan script TOMBOL di postingan anda


 <a href="#" class="button big blue">download</a> 

4. Simpan Dan Lihat Hasilnya

0 Response to "Membuat Tombol Download Gelembung di blog Efek buble pada Link download"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel