Tombol Menu Unik dengan CSS3 Animasi

Mencari sesuatu yang baru memang sulit.dibutuhkan kerja keras untuk mendapatkan sesuatu yang baru.inspirasipun tidak akan datang jika kita hanya berdiam diri,dan akhirinya setelah keliling" dunia browsing browsing dan browsing.akhirnya,kepala gw pusing @___@"

wakakaka,memang bikin galau trik yang satu ini.sebelum'a saya cuma iseng" dengan CSS3 keyframe yang saya buat n modif sendiri di header blog saya,tapi karena kepikiran yang lain juga,banyak messages gajelas di fb yang minta share" cara'a,yweslah saya share deh.tapi trik ini agak beda dengan yang ada di header saya,beda'a CSS ini saya terapkan untuk tombol readmore.tapi sebenarnya bisa juga untuk tombol menu sendiri.karena kalau saya nyebarin masang animasi sebesar itu yang seperti blog saya,yang ada saya malah nyebarin dosa memberatkan blog kamu deh.wakwkawkawk.tapi untuk trik ini menurut saya cukup ringan,tidak ada penggunaan gambar sama sekali,100% CSS3.tapi untuk tampilan terbaik,saya sarankan untuk upgrade browser kamu ke versi yang terbaru,dan jangan sekali" menggunakan Internet Explore,karena IE tidak 100% mendukung CSS3 animasi.ok lansung saja~

Sebelumya saya ingatkan dahulu untuk,BACKUP TEMPLATE ANDA sebelum menggunakan trik ini ==v
#kerusakan template bukan tanggung jawab saya.

Tampilan terbaik dapat dirasakan dengan browser Goggle chrome karena 100% mendukung css3 animasi.sedangkan untuk Mozilla firefox tidak.akibat'a kalau dibuka dengan Mozilla,mungkin akan terasa berat dan animasinya agak ngadet",jadi pikir" dahulu untuk menggunakan trik ini.so,yang mau coba" belajar css3 keyframe,silakan dicoba"~xD

Trik dibawah ini,adalah trik untuk tombol Readmore kamu.
saya akan jelaskan untuk Contoh Style 1 *contoh'a ada dibawah*

Trik 1

Pertama buka blogger=>rancangan=>Edit HTML,copy paste CSS dibawah ini diatas kode [
]]></b:skin>

.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;
}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

Setelah itu simpan,dan centang expand widget templates,lalu cari kode html yang seperti ini/ yang mirip" seperti dibawah ini(kode HTML dibawah ini berasal dari template guilty crown)

#note.ada kemungkinan saat kamu mencari kode html dibawah ini,kamu akan menemukan 2 kode yang sama persis.
#solusi:dicopas dua"a

<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'>Read More....</a>
</span>

lalu hapus semua kode diatas,kemudian diganti Dengan kode html dibawah ini

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a expr:href='data:post.url'>Read More...</a>
</div></div>

Setelah Itu simpan dan lihat hasilnya~

-Contoh uji coba di template guilty crown-

Trik 2

CSS'a sama dengan cara diatas,beda'a cara yang dibawah ini kita tinggal mengganti hanya mengganti kode html

<a expr:href='data:post.url'>Read More...</a>

dengan

<a href="http://alamatlink">namalink</a>

Tujuanya agar Url linknya bisa kita sesuaikan dengan alamat link yang kita inginkan.ganti http://alamatlink dengan url link kamu.
(berlaku untuk semua style)

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a href="http://alamatlink">namalink</a></div></div>

kamu tinggal ganti alamat dan nama linknya.bisa di letakan dimana saja(kode HTTML ada tempatnya)
diantara kode body
#buat yang ga ngerti (<body> isi html </body>)
atau bisa juga diletakan di (rancangan=> add a gadget=>HTML/JavaScript=> copy paste lalu simpan.

Tambahan: Untuk mengganti warna,kamu tinggal ganti kode warna hexa dan rgbanya.
misal

Warna merah:
Hexa :#ff0000

Rgba color: rgba(255,0,0,0.9);

Info lanjut'a ada dipostingan saya

-Tips design menggunakan CSS3

-Tips memilih warna design blog

Style1

DEMO

CSS

.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;

}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

HTML

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a expr:href='data:post.url'>Read More...</a>
</div></div>

Style 2

Demo

CSS

.circlebg {
width: 53px;
height: 53px;
position: relative;
border-radius: 50px;
-moz-animation: spin3Pulse 3s infinite ease-in-out;
-webkit-animation: spin3Pulse 3s infinite linear;
}

.circlewrapper2 {
width: 53px;
height: 53px;
text-align: center;
border-radius: 50px;
border: 3px solid rgba(0, 0, 0, 0.9);
padding: 8px;
background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
}

.circlewrapper3 {float:right;}

.circlewrapper3 a {
width: 78px;
height: 78px;
float: right;
font-size: 14px;
text-align: center;
border-radius: 50px;
text-shadow: 0 1px 1px black;
margin-top: -50px;
position: absolute;
line-height: 20px;
}

.circle4 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}


.circle5 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -51.5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
}

.circle6 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -103.5px;
}

.circle7 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -155px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}


@-moz-keyframes spin3Pulse {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);}
}
@-webkit-keyframes spin3Pulse {
0% { -webkit-transform:rotate(360deg);}
100% { -webkit-transform:rotate(0deg); }
}

HTML

<div class="circlewrapper3">
<div class="circlewrapper2">
<div class="circlebg">
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
</div></div>
<a expr:href='data:post.url'>Read More</a>
</div>

Style3

Readmore

CSS

span[class*="l-"] {/*Blog Johanes-Djogzs.blogspot.com*/
height: 4px; width: 4px;
background: #fff;
display: inline-block;
margin: 2px 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;}/*Blog Johanes-Djogzs.blogspot.com*/
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}/*Blog Johanes-Djogzs.blogspot.com*/
50% {-webkit-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-keyframes loader {
0% {-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}/*Blog Johanes-Djogzs.blogspot.com*/
.tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;}
.loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);}
.loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black;
border-right: 1px solid #333;border-top: 1px solid black;/*Blog Johanes-Djogzs.blogspot.com*/
background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);/*Blog Johanes-Djogzs.blogspot.com*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}

HTML

<div class='loading'>
<p class='tombol-readmore'><a expr:href='data:post.url'>Readmore</a></p>
<span class='l-1'/>
<span class='l-2'/>
<span class='l-3'/>
<span class='l-4'/>
<span class='l-5'/>
<span class='l-6'/></div>

Style4

Readmore

CSS

.menureadmore1 {
clear: both;
margin:auto;
background: black;
font-size: 15px;
color: #32BDE8;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px solid
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;}

.menureadmore1::before {
content: "";
position: absolute;
width: 125px;
margin: auto;
height: 125px;
border: 8px solid
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -30px;
margin-left: -30px;
}

.animasimenureadmore1 {
position: absolute;
width: 105px;
margin: auto;
height: 105px;
border: 8px dotted rgba(50, 189, 232, 0.8 );
-webkit-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -100px;
margin-left: -20px;
-moz-animation:spin5Pulse 2s infinite linear;
-webkit-animation:spin5Pulse 2s infinite linear;
}

@-moz-keyframes spin5Pulse {
0% { -moz-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -moz-transform:rotate(-360deg); opacity:0;}
}
@-webkit-keyframes spin5Pulse {
0% { -webkit-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -webkit-transform:rotate(-360deg); opacity:0;}
}

HTML

<div class='menureadmore1'>
<a expr:href='data:post.url'>Readmore</a>
<div class='animasimenureadmore1'/>
</div>