Posted By

ryanfiorini on 04/03/12

Tagged

button
CSS3

Versions (?)

Last Edited at 04/03/12 10:40pm

Statistics

Viewed 443 times

Favorited by 0 user(s)

Related snippets

Nice Gradient Button with Hover all CSS

/ Published in: CSS

This uses transitions for the hover effect which has limited IE support.

Highlighted TextExpand

<style>
.boxGrn {
    display:inline;
    float:left;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
    width:174px; height:38px;
    border-top:1px solid #666;
    background: -o-linear-gradient(top, #87C031 0%, #618A13 100%);
    background: -moz-linear-gradient(top, #87C031 0%, #618A13 100%);
    background: -webkit-linear-gradient(top, #87C031 0%, #618A13 100%);
    background: -ms-linear-gradient(top, #87C031 0%, #618A13 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#87C031), to(#618A13));
    background: linear-gradient(top, #87C031 0%, #618A13 100%);
}
a.buttonGrn:link, a.buttonGrn:visited  {
    text-transform:uppercase;
    display:inline;
    float:left;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
    width:160px; height:26px;
    margin:5px 6px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff; line-height:27px; font-weight:bold; text-decoration:none;
    padding-left:26px;
    background: -o-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)), color-stop(.5,rgba(0,0,0,0)), color-stop(.5,rgba(0,0,0,.2)));
    background: linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
    background-position:0px 0px;
    background-repeat:no-repeat;
    background-color:rgba(156,209,78,.6);
    -webkit-border-radius:4px; border-radius:4px;
    -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.8); box-shadow:0px 1px 5px rgba(0,0,0,0.8);
    -o-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -webkit-transition:all 0.4s ease; transition:all 0.4s ease; 
}
a.buttonGrn:hover, a.buttonGrn:focus {
    color:#333;
    background-color:rgba(255,255,255,1);
    -webkit-box-shadow:0px 1px 6px rgba(0,0,0,1); box-shadow:0px 1px 6px rgba(0,0,0,1);
}
Ãƒï¿½Ã¯Â¿Â½Ãƒï¿½Ã‚Â¢Ãƒï¿½Ã‚Â¯Ãƒï¿½Ã‚Â¿Ãƒï¿½Ã‚Â½Ãƒï¿½Ã‚Â¯Ãƒï¿½Ã‚Â¿Ãƒï¿½Ã‚Â½</style>

<div class="boxGrn">
<a href="javascript:;" onclick="return false;" class="buttonGrn">Hows my Button?</a>
</div>Ãƒï¿½Ã¯Â¿Â½Ãƒï¿½Ã‚Â¢Ãƒï¿½Ã‚Â¯Ãƒï¿½Ã‚Â¿Ãƒï¿½Ã‚Â½Ãƒï¿½Ã‚Â¯Ãƒï¿½Ã‚Â¿Ãƒï¿½Ã‚Â½

URL: http://jsfiddle.net/ryanwfiorini/PRfb8/8/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.