CSS Buttons

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.

  <input value="Input" class="button style" type="button">
        <button class="button style"><b class="gradient"></b><span>Button</span></button>
        <a href="#" class="button style"><b class="gradient"></b><span>Anchor</span></a>

Live Sample:(Mouse over to feel difference)

  Anchor