Advanced Search

Nice Gradient Button with Hover all CSS

/ Published in: CSS
Save to your folder(s)
This uses transitions for the hover effect which has limited IE support.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. .boxGrn {
  3.     display:inline;
  4.     float:left;
  5.     -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
  6.     width:174px; height:38px;
  7.     border-top:1px solid #666;
  8.     background: -o-linear-gradient(top, #87C031 0%, #618A13 100%);
  9.     background: -moz-linear-gradient(top, #87C031 0%, #618A13 100%);
  10.     background: -webkit-linear-gradient(top, #87C031 0%, #618A13 100%);
  11.     background: -ms-linear-gradient(top, #87C031 0%, #618A13 100%);
  12.     background: -webkit-gradient(linear, left top, left bottom, from(#87C031), to(#618A13));
  13.     background: linear-gradient(top, #87C031 0%, #618A13 100%);
  14. }
  15. a.buttonGrn:link, a.buttonGrn:visited  {
  16.     text-transform:uppercase;
  17.     display:inline;
  18.     float:left;
  19.     -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
  20.     width:160px; height:26px;
  21.     margin:5px 6px;
  22.     font-weight:bold;
  23.     font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff; line-height:27px; font-weight:bold; text-decoration:none;
  24.     padding-left:26px;
  25.     background: -o-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
  26.     background: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
  27.     background: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
  28.     background: -ms-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
  29.     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)));
  30.     background: linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
  31.     background-position:0px 0px;
  32.     background-repeat:no-repeat;
  33.     background-color:rgba(156,209,78,.6);
  34.     -webkit-border-radius:4px; border-radius:4px;
  35.     -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.8); box-shadow:0px 1px 5px rgba(0,0,0,0.8);
  36.     -o-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -webkit-transition:all 0.4s ease; transition:all 0.4s ease; 
  37. }
  38. a.buttonGrn:hover, a.buttonGrn:focus {
  39.     color:#333;
  40.     background-color:rgba(255,255,255,1);
  41.     -webkit-box-shadow:0px 1px 6px rgba(0,0,0,1); box-shadow:0px 1px 6px rgba(0,0,0,1);
  42. }
  43. ���¢�¯�¿�½�¯�¿�½</style>
  44.  
  45. <div class="boxGrn">
  46. <a href="javascript:;" onclick="return false;" class="buttonGrn">Hows my Button?</a>
  47. </div>���¢�¯�¿�½�¯�¿�½

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.