How to Add CSS3 Animated Readmore Button on mouse over without image?

Professional blogger always tries to formulate or develop which is useful to other webmasters. Today in this tutorial we educate you about How to Add a Hover based Readmore button on mouse over in different style. Animated CSS3 button code helps webmasters blog/website more attractive and new look.
We’re not sure that this will definitely attracts your subscribers with its animated style effect. In this code no image is added its pure CSS3 code animated button style widget for Readmore option. Let’s start the tutorial to spiceup your blog.

How to Add CSS3 Animated Readmore Button on mouse over without image?

Sign into your blogger account
From Blogger Dashboard Select ‘Template’ link tab
Note: Before you implement this code on your blog just backup template, if any thing goes wrong you can reuse it again.
Search for tag

]]></b:skin>

After finding tag copy below code and paste above to it as shown in the image

.button {
    font-family: sans-serif;
    font-weight:bold;
    color: #fff;
    padding:5px 10px 6px 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    cursor: pointer;
    }
.black {
    background:#0874ee;
    background-image: -moz-linear-gradient(top,#0874ee,#0874ee);
    background-image: -webkit-gradient(linear,left top,
left bottom,from(#0874ee),to(#0874ee)   );
    }
.black:hover{background:#2B2A2A; }
.size {font-size:12px;}

Now Search for code

<a expr:href='data:post.url + "#more"'>Read More </a>

Now replace ‘Readmore’ word with

<a class='button size black' expr:href='data:post.url'>Read More</a>

For Classic Template search for code

<b:if cond='data:blog.pageType != &quot;item&quot;'> <a expr:href='data:post.url'><div style='text-align: right;'>Read More -&gt;&gt;</div></a> </b:if>

Replace it with below code

<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;'><a class='button size black' expr:href='data:post.url'>Read More</a></a></div></b:if>

That’s it you’ve done ‘Save your template’ to preview.

If you’re facing any type of problem please bring to us using our comment box and Don’t’ forget to Join in Our Community.
We always appreciate for Subscribing to US.