Animated Css3 Blogger Buttons With Nice Image Effect

In  this  tutorial im gonna explain how to addnice  Css3 buttons  with  image hover  effect. you can use it for   any buttons.  specially for sale items.you can change image as your like. Im using  Css3 and HTML  for these buttons. 

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code  by using Ctrl+F  ]]></b:skin>

6.  Paste below code Before ]]></b:skin> code

.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;
  

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<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/AVvXsEgJF5jIR2BQlKAqd6DidvH1Vw0nagG3PUldPsxLYp7YUnBziuy_vUPZQ7xhnxdknA6xhLgALlf3lyEmhW-8oOic0J44YHyGaIzIMyOLfqAFl2eZhK6ZAgDSmPowgZ72EO1_oV1OveBfBcJq/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/AVvXsEhKum948eMIlCkTnB8gqNfvoI6VUvjfI8LZ63g0YUEGh5wewdu7why_VUAvX8BBB7dejPdjfJCjM40WhTezNiER9XnvzyjOi4Kv_2HN3uoXj2d5TeUKSZowrcJSqochRVkf2d4ZtLVkOz9r/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/AVvXsEgalvYBqS8ISAVgJsSfPrEEmOGjCbXvkHO8InSmrPVl1p0-Y6XOvt6OPNJA124TdVFCyfmplCQuwEqxdaE64eiJU0igan1CyLq0Xkzz065OgoNqxG12FqbVJmDTdZu6TKpT6DV2r7ZVRg6r/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/AVvXsEgp03JK-yJ2MFaCSwFw8OtxB4HUyXiJBtorb_bAbHm77SHRGshPaFXy9AOaZ6hqmCKkOjduaXK7ygw4Po36r_VgZfCenYw3hQ2wApWlCy4gQxI-9DQBClpz5SgJKcuGmDUVrUADI-3lv73x/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>

 *Replace # with button Button URL

10. Now save your template. You are done.