Create buttons with pure css:
The following buttons created by using only css. But it look like an image button, here you can see a fading effect while mouse over the button. You can copy and use bellow code for
css button with fading effect
<style type="text/css">
.button {
font:normal 18px sans-serif;
text-decoration:none;
padding:2px 12px 3px 12px;
cursor:pointer;
position:relative;
overflow:hidden;
vertical-align:middle;
margin:0 8px;
}
a.button {
display:inline-block;
padding:3px 14px 4px 14px;
}
.button span {
position:relative;
}
.style {
color:#92c564;
border:1px solid #111;
background:#2e2f31;
background:-moz-linear-gradient(top, #45494d, #161616);
background:-webkit-gradient(linear, left top, left bottom, from(#45494d), to(#161616));
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-box-shadow:rgba(0,0,0,.4) 0 0 8px;
-webkit-box-shadow:rgba(0,0,0,.4) 0 0 8px;
text-shadow:rgba(255,255,255,.6) 0 0 16px;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.style span {
position:relative;
z-index:1;
}
.style .gradient {
display:block;
width:280%; height:280%;
position:absolute;
bottom:-150%;
left:-10%;
background:-moz-radial-gradient(center center, ellipse cover, rgba(255,255,255,0), rgba(255,255,255,0) 60%, rgba(255,255,255,.15) 61%, rgba(255,255,255,0));
background:-webkit-gradient(radial, 112 128, 0, 112 128, 196, from(rgba(255,255,255,0)), color-stop(60%, rgba(255,255,255,0)), color-stop(61%, rgba(255,255,255,.15)), to(rgba(255,255,255,0)));
z-index:4;
}
button.style .gradient {
bottom:-145%;
left:-17%;
background:-moz-radial-gradient(center center, ellipse cover, rgba(255,255,255,0), rgba(255,255,255,0) 60%, rgba(255,255,255,.14) 61%, rgba(255,255,255,0));
}
.style:hover, .style:focus {
color:#c5e4a9;
text-shadow:rgba(255,255,255,1) 0 0 12px;
}
</style>
You can call the css class for any links and buttons in your page.