Create a Pressed Button Effect with CSS

The HTML

Simply add a class to your link.

<a href="#" class="readmore">Click Here</a>

The CSS

This is where the fun stuff happens.
First just give the button it’s visual styling. In this case I’m duplicating the grey button effect from my home page slider.
Note the box shadow style. The y-axis distance is set to 3px, which gives the box element a 3px drop shadow on the bottom.

The Rollover

Now, on hover, you will want to again style the visual portion of the button. Then you will need to do two things:

• Position the link “relative” and assign the top to have 3 extra pixels.
• Define the box shadow again, only now set the value to “none”.

This removes the distance of the drop shadow and moves the button down to that equal distance.

.readmore {
background: #2f2f2f;
text-align: center;
display: block;
width: 120px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
.readmore:hover {
position:relative;
top:3px;
color: #fqq;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}


OR TRY THIS 

a.readmore {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamS6X_jR97hrEjEXCCWITiwGSBIoHlvxxEfa8SvccQItatnORMptuCjP7Kwj08XvNGV9Zp_QJH9yRFTLjA9_5PbFhhLjC0XwHp0RPWJ8TLoi1LJFXuY2sXA7MtffS7a2b15CZnZagIGw/s1600/readmore_bg.jpg")
 no-repeat scroll right center transparent;
 border: medium none;
 border-radius: 8px 8px 8px 8px;
 box-shadow: 0 3px 3px #000000;
 width: 120px;
 color: #5DBA82;
 font-size: 16px;
 font-weight: bold;
 line-height: 16px;
 margin: 5px auto;
 padding: 5px 55px 5px 15px;
 text-align: center;
}
a.readmore:hover {
 box-shadow: none;
 color: #FFFFFF;
 position: relative;
 top: 3px;
}

In Action

Click Here