CSS3 Anim. Button

Pure CSS3 Anim. Button - Rosyd Zone>Tutorial CSS - Pasti kalian udah Liat Tampilan Baca Selengkapnya Punya saya kan ? Nah, kali ini kita akan Ulas Cara membuat Tombol tersebut, sebenernya, ini hasil Cloning di tympanus.net sebenernya ada tutornya di situ, tetapi setelah kita terapkan, akan terlihat kurang menarik, karena ga ada Animationya, nah saya akan mencoba untuk membuat Animasinya di sini, langsung aja kita Ulas bareng² ya dari pada kelamaan.

1. First, Copy Code CSS ini di atas Tag ]]></b:skin>

/* BACA SELENGKAPNYA rosydz.blogspot.com */
.a-btn{
background-image: linear-gradient(bottom, rgb(122,148,9) 44%, rgb(146,173,26) 72%);
background-image: -o-linear-gradient(bottom, rgb(122,148,9) 44%, rgb(146,173,26) 72%);
background-image: -moz-linear-gradient(bottom, rgb(122,148,9) 44%, rgb(146,173,26) 72%);
background-image: -webkit-linear-gradient(bottom, rgb(122,148,9) 44%, rgb(146,173,26) 72%);
background-image: -ms-linear-gradient(bottom, rgb(122,148,9) 44%, rgb(146,173,26) 72%);

background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.44, rgb(122,148,9)),
 color-stop(0.72, rgb(146,173,26))
);
    padding-left: 20px;
    padding-right: 80px;
    height: 38px;
    display: inline-block;
    position: relative;
    border: 1px solid #92ad1a;
    box-shadow: 
  0px 1px 1px rgba(255,255,255,0.8) inset, 
  1px 1px 3px rgba(0,0,0,0.2), 
  0px 0px 0px 4px rgba(188,188,188,0.5);
    border-radius: 20px;
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0px 0px 0px 4px rgba(188, 188, 188, 0.5);
-moz-box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0px 0px 0px 4px rgba(188, 188, 188, 0.5);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
    float: left;
    clear: both;
    margin: 10px 0px;
    overflow: hidden;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.a-btn-text {
padding-top: 5px;
display: block;
font-size: 18px;
white-space: nowrap;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.3);
color: #2b801c;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.a-btn-slide-text {
position: absolute;
height: 100%;
top: 0px;
right: 52px;
width: 0px;
 -moz-background-size:50px 50px;
  background-size:50px 50px; /* Controls the size of the stripes */
  background-color:#ac0;
  background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(.25,rgba(255,255,255,.2)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,.2)),color-stop(.75,rgba(255,255,255,.2)),color-stop(.75,transparent),to(transparent));
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
  background-image:-moz-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
  background-image:-ms-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
  background-image:-o-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
  background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent); 
text-shadow: 0px -1px 1px #363F49;
color: white;
font-size: 18px;
white-space: nowrap;
text-transform: uppercase;
text-align: left;
text-indent: 10px;
overflow: hidden;
line-height: 38px;
-webkit-box-shadow: -1px 0px 1px rgba(255, 255, 255, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
box-shadow: -1px 0px 1px rgba(255, 255, 255, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: width 0.3s linear;
-moz-transition: width 0.3s linear;
-o-transition: width 0.3s linear;
transition: width 0.3s linear;
}
.a-btn-icon-right {
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: 52px;
border-left: 1px solid #5D81AB;
-webkit-box-shadow: 1px 0px 1px rgba(255, 255, 255, 0.4) inset;
-moz-box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow: 1px 0px 1px rgba(255, 255, 255, 0.4) inset;
}
.a-btn-icon-right span {
width: 38px;
height: 38px;
opacity: 0.7;
position: absolute;
left: 50%;
top: 50%;
margin: -20px 0px 0px -20px;
background: transparent url(http://icons.iconarchive.com/icons/chromatix/keyboard-keys/32/arrow-right-icon.png) no-repeat 50% 55%;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.a-btn:hover{
    padding-right: 180px;
    box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn:hover .a-btn-text{
    text-shadow: 0px 1px 1px #5d81ab;
    color: #fff;
}
.a-btn:hover .a-btn-slide-text{
    width: 100px;
}
.a-btn:hover .a-btn-icon-right span{
    opacity: 1;
}
.a-btn:active {
    position: relative;
    top: 1px;
    background: #5d81ab;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #80a9da;
}

(Ket : Kode Warna biru boleh di ganti, kalo mau Edit Edit terserah sobat :D )
2. Second, buka Template>Edit HTML>Lanjutkan>Centang Expand Template Widget Cari kata yang anda Gunakan untuk membuat Readmore Semisal "Baca Selengkapnya" maka nanti akan terbentk HTML Normal seperti Berikut

 <a class="a-btn" expr:href="data:post.url" href=""> Baca Selengkapnya</a>

3. Next, Ganti Code HTML Tersebut, dan Ganti dengan Code Di bawah ini

<a class='a-btn' expr:href='data:post.url'> <span class='a-btn-text'>Baca Selengkapnya &#187;</span> 

<span class='a-btn-slide-text'>Artikel</span>

<span class='a-btn-icon-right'><span/></span></a>

4. Simpan Template, dan Lihat apa yang terjadi :O Readmore Anda sekarang Mirip dengan Readmore Milik Blog saya :D (Untuk warna dan lain² bisa anda Edit sendiri


Live DEMO