Created (c) by Princexells Seyka (Princelling Saki)

Senin, 15 April 2013

Animated Css3 Blogger Buttons With Nice Image Effect

Browse » Home » » Animated Css3 Blogger Buttons With Nice Image Effect

Animated+Css3+Blogger+Buttons+With+Nice+Image+Effect




1. Masuk ke account blogger sobat

2. Lalu Pilih 'Template'

3. Sekarang sobat klik 'EDIT HTML'

4. Cari kode ini ]]> </ b: skin> dengan menggunakan Ctrl + F, untuk mempermudah pencarian

6. Copy kode di bawah ini dan letakkan Sebelum Kode ]]> </ b: skin>  

 .a-btn{
    background:#a9db80;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));
    background:-webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:-moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:-o-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:linear-gradient(top, #a9db80 0%, #96c56f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
    padding-left:90px;
    padding-right:105px;
    height:65px;
    display:inline-block;
    position:relative;
    border:1px solid #80ab5d;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position:absolute;
    left:15px;
    top:13px;
    border:none;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position:absolute;
    font-size:36px;
    top:18px;
    left:18px;
    color:#6d954e;
    opacity:0;
    text-shadow:0px 1px 1px rgba(255,255,255,0.4);
    -webkit-transition:opacity 0.2s ease-in-out;
    -moz-transition:opacity 0.2s ease-in-out;
    -o-transition:opacity 0.2s ease-in-out;
    transition:opacity 0.2s ease-in-out;
}
.a-btn-text{
    padding-top:5px;
    display:block;
    font-size:30px;
    text-shadow:0px -1px 1px #80ab5d;
}
.a-btn-text small{
    display:block;
    font-size:11px;
    letter-spacing:1px;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:80px;
    border-left:1px solid #80ab5d;
    -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;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    border:1px solid rgba(0,0,0,0.5);
    background:#4e5c50 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuL1vho2e-7X6UE5U-R4x9vEpwK5JLq_34va_8r3ZghOvdD20b9mlXuZO4CYf6H6DOsayfWBFEUrfHL2dq74MsnuLtlxuA2rCD0QeVHh_rBmp1805CPO0gfbsdTYSLUQjfJzDpfcETje4/s1600/arrow_down_black.png) no-repeat center center;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn:hover{
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}

.a-btn img{ margin-top:-15px;}

.a-btn:hover img{
    -webkit-transform:scale(10);
    -moz-transform:scale(10);
    -ms-transform:scale(10);
    -o-transform:scale(10);
    transform:scale(10);
    opacity:0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
}
.a-btn:active{
    position:relative;
    top:1px;
    background:#80ab5d;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#a9db80;
}
.a-btn:active .a-btn-icon-right span{
    -webkit-transform:scale(1.4);
    -moz-transform:scale(1.4);
    -ms-transform:scale(1.4);
    -o-transform:scale(1.4);
    transform:scale(1.4);
}

7. Pergi ke blogger dan pilih Tata Letak

8. Klik Tambah Gadget dan pilih 'HTML / Javascript'

9.Copas Kode Dibawah ini 

 <div class="content">
                <div class="button-wrapper">
                    <a href="#" class="a-btn">
                        <span class="a-btn-slide-text">$9</span>
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhztTIuns2PCVjzFgjlZRdvHw9AY85KZ5pYB1_q_DZfpyu6v_M5iEQWo1p5DAU2yGWDcb9zawcERGrUXkWbrNZAJf_y9fU5HABQjFc4eQFkUOLO6FZl00t2FlY5VsryCeobKqp0zzwOsH1S/s1600/1.png" alt="Photos" />
                        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
                        <span class="a-btn-icon-right"><span></span></span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-slide-text">$75</span>
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimyhbH_5hg37GncdneWAxTH2o2TPaWugOBOaKo8JIVjw_bOCfTGWtwIL3aqz4ftz2nhYJPr-85vUbLn2D6B2Vsk3SnFvYsg1CRG49H0eAB3Rocxh1G2xXP5NFyArbwVCHoN6ZGrar3FizG/s1600/2.png" alt="Maps" />
                        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
                        <span class="a-btn-icon-right"><span></span></span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-slide-text">$25</span>
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEazxXouqlMIDqnBHASUdCAvplksda2X2L1nejDUG6NOj1X_-dyJeyCpp2Ztq5uTeu8roFjkWkPfuofVQXuEi8s88F5V0OO0HZpmAb9qwyA-U5SJ1mSphyaWG1rPTwDlas-OkmRXZYve1W/s1600/3.png" alt="Settings" />
                        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
                        <span class="a-btn-icon-right"><span></span></span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-slide-text">$100</span>
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0O3CbR6Twj0gtbpp6Vwwfu61FO7FMD2n4G26l9FOKmBnVcQNKAHHw9V-MjR4v0_CMLCJioYxa1WkYPOeROmHo_MHHPQ7YoCUiH9Vk1ebXNkfClsRa94n1IGjTGWBw7YdbeNOLtd1mfMU/s1600/4.png" alt="Wireless" />
                        <span class="a-btn-text"><small>Available on the Apple</small> Download</span> 
                        <span class="a-btn-icon-right"><span></span></span>
                    </a>
                </div>
            </div>

* Ganti # dengan URL Tombol"

10. Simpan,

   Selamat Mencoba...

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM


Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Langganan: Posting Komentar (Atom)

Visitor

Lagi Perbaikan Blog
Back to Top