advanced code snippet search

Posted By

nathanlong on 10/16/10


Tagged

button CSS3


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

maltem
webthread


Fancy CSS Button - Green

 / Published in: CSS
 

Green button with color transitions for both text and the background on hover. The transition only works for webkit browsers currently. Users in IE will only see a boxy button, no rounded corners or transitions, but a button all the same.

Expand | Embed | Plain Text 
  1. a.btn {
  2. 	background: #008752 url(images/alert-overlay.png) repeat-x; /*white gradient png*/
  3. 	color: #fff;
  4. 	display: inline-block;
  5. 	text-decoration: none;
  6. 	padding: 5px 9px; /* Space around the button */
  7. 	border-bottom: 1px solid rgba(0,0,0,0.25); /* adds a slightly darker line on bottom */
  8. 	-webkit-border-radius: 7px;
  9. 	-moz-border-radius: 7px;
  10. 	border-radius: 7px;
  11. 	-webkit-transition: color .6s linear;
  12. 	-webkit-transition: background-color .6s linear;
  13. 	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  14. 	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  15. 	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  16. }
  17.  
  18. a:hover.btn {
  19. 	background: #fff url(images/alert-overlay.png) repeat-x;
  20. 	color: #008752;
  21. 	text-decoration: none;
  22. 	padding: 5px 9px;
  23. 	border-bottom: 1px solid rgba(0,0,0,0.25);
  24. 	-webkit-border-radius: 7px;
  25. 	-moz-border-radius: 7px;
  26. 	border-radius: 7px;
  27. 	-webkit-transition:color .2s linear;
  28. 	-webkit-transition:background-color .2s linear;
  29. 	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  30. 	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  31. 	text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  32. }

Report this snippet  

You need to login to post a comment.