No need a image for button - CSS 3 Makes Effect as Button

CSS 3 Makes Effect as Button


Code:
<style>
.button {
   display: inline-block;
   outline: none;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   font-family: Tahoma, Arial, Helvetica, sans-serif;
   padding: .3em 1.2em .35em;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   -webkit-border-radius: .5em;
   -moz-border-radius: .5em;
   border-radius: .5em;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
   margin-top:12px;
}
.button:hover,.button:visited,{ text-decoration: none; color:#fff; }
.button:active { position: relative; top: 1px; }
.orange,.orange:visited {
   color: #fef4e9;
   border: solid 1px #da7c0c;
   background: #f78d1d;
   background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
   background: -moz-linear-gradient(top, #faa51a, #f47a20);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover{
   color: #fef4e9;
   background: #f47c20;
   background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
   background: -moz-linear-gradient(top, #f88e11, #f06015);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active{
   color: #fcd3a5;
   background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
   background: -moz-linear-gradient(top, #f47a20, #faa51a);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
</style>


<div><a class="button orange" href="http://os-code-web.blogspot.com/2011/05/no-need-image-for-button.html">Read Post</a></div>


Demo:

Read Post