Stylish CSS3 Read More Button With Hover Effect For Blogger

Every blogger always try to make his blog look professional, so today i am going to tell how you can use animated css3 buttons for your blogger blog. It will give your blog a pro look. I have seen many expert bloggers advising Images for Read More button but it does not look good and it increases the load time of your blog because each image takes separate http request. So lets start:-

Demo

Continue...

Stylish CSS3 Read More Button Without Any Image and Jquery

Cool and stylish read more and download buttons makes a website or a blog look professional. I have seen websites and blogs using an image for buttons then use jquery to style them. It makes a website slower because each image will make a separate http request and jquery on each button will make things dead slow.
Today , I am going to show you how we can have buttons without any image and jquery , but simply using CSS code:-


Demo

Demo

CSS Code of Read More Button

.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:#7F7F7F;
    background-image: -moz-linear-gradient(top,#7F7F7F,#2B2A2A);
    background-image: -webkit-gradient(linear,left top,
left bottom,from(#7F7F7F),to(#2B2A2A)   );
    }
.black:hover{background:#2B2A2A; }
.size {font-size:12px;}

You can change font family,font size ,button size also you can give some unique effects to your Read More button here
Now after adding above CSS code you can apply it as

<a class="button size black">Read More</a>

Continue...