Nice Gradient Button with Hover all CSS - CSS Snipplr Social Repository

Revision: 56595

at April 4, 2012 22:15 by ryanfiorini

Updated Code

<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>Ãƒï¿½Ã¯Â¿Â½Ãƒï¿½Ã‚Â¢Ãƒï¿½Ã‚Â¯Ãƒï¿½Ã‚Â¿Ãƒï¿½Ã‚Â½Ãƒï¿½Ã‚Â¯Ãƒï¿½Ã‚Â¿Ãƒï¿½Ã‚Â½

Revision: 56594

at April 3, 2012 22:40 by ryanfiorini

Initial Code

<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>Ãƒï¿½Ã‚Â¢ÃƒÂ¯Ã‚Â¿Ã‚Â½ÃƒÂ¯Ã‚Â¿Ã‚Â½

Initial URL

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

Initial Description

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

Initial Title

Nice Gradient Button with Hover all CSS

Initial Tags

button, CSS3

Initial Language

CSS

Choose a language for easy browsing: