Posted By

ryanfiorini on 04/03/12


Tagged

button hover CSS3 gradient


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

spee66


Nice Gradient Button with Hover all CSS


 / Published in: CSS
 

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

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

  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>���¢�¯�¿�½�¯�¿�½

Report this snippet  

You need to login to post a comment.