CSS Buttons

Posted by Prince | 4:29:00 PM | | 0 comments »

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

0 comments

Related Posts Plugin for WordPress, Blogger...