Posted By

marcio on 04/30/10


Tagged

css google CSS3 buttons


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Nanobyte


CSS3 google buttons


 / Published in: CSS
 

URL: http://www.zurb.com/playground/google-buttons

Falta por generar compatibilidad con FF en los gradients, borders...

  1. button.g-button, a.g-button, input[type=submit].g-button { padding: 6px 10px; -webkit-border-radius: 2px 2px; border: solid 1px rgb(153, 153, 153); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221))); color: #333; text-decoration: none; cursor: pointer; display: inline-block; text-align: center; text-shadow: 0px 1px 1px rgba(255,255,255,1); line-height: 1; }
  2. .g-button:hover { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(248, 248, 248)), to(rgb(221, 221, 221))); }
  3. .g-button:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(204, 204, 204)), to(rgb(221, 221, 221))); }
  4. .g-button.large { padding: 12px 20px; font-size: 21px; font-weight: bold; }
  5. .g-button.scaled { -webkit-transform: scale(2); -webkit-transform-origin: bottom left; }
  6.  
  7. .g-button.blue { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227))); border-color: rgb(98,202,227); }
  8. .g-button.green { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(213,224,77))); border-color: rgb(213,224,77); }
  9. .g-button.red { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(241,93,34)), to(rgb(146,60,6))); border-color: rgb(146,60,6); text-shadow: 0px -1px 1px rgba(0,0,0,0.5); color: #fff; }
  10. .g-button.purple { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(202,0,108)), to(rgb(124,0,64))); border-color: rgb(202,0,108); text-shadow: 0px -1px 1px rgba(0,0,0,0.5); color: #fff; }
  11. .g-button.orange { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(245,132,38))); border-color: rgb(245,132,38); }

Report this snippet  

You need to login to post a comment.