Labels: Blog Design, Widget
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
Tambahkan kode dibawah ini diatas kode langkah 4
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* A more rounded button */
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/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));
}
Klik dan simpan template
Gunakan kode dibawah ini untuk memanggil tombol tersebut
Button small blue
Bubble Button merupakan tombol yang bergaya animasi dan mengunakan CSS3 hal ini dapat membuat blog sobat tampak lebih futuristik, dan dengan menggunakan tombol ini saya yakin pengunjung pada betah di blog sobat, kenapa karena dalam button ini dirancang seperti nyata, seperti air yang berada dalam toples atau plastik kresek heheh...
Preview
CARA MEMBUAT CSS3 ANIMATION BUBBLE BUTTONS
]]></b:skin>
Langkah 5/* The three buttons sizes */
KETERANGAN
<a href="#" class="button small blue">Small Button</a>
Button Blue Rounded<a href="#" class="button small blue rounded">Rounded</a>
<a href="#" class="button big blue">Big Button</a>
Post a Comment