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>