advanced code snippet search

Posted By

marcio on 04/12/10


Tagged

css button CSS3 boton detailed


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

Nanobyte
tcelestino
clinicdigital


Realistic Looking Button with CSS3

 / Published in: CSS
 

URL: http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/

Expand | Embed | Plain Text 
  1. /*HTML: <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a>*/
  2.  
  3. a.button {
  4. 	text-decoration: none;
  5. 	border-color: transparent transparent #ECECEC; /** rgba fallback **/
  6. 	border-color: transparent transparent rgba(255, 255, 255, 0.63);
  7. 	cursor: pointer;
  8. 	outline: none;
  9. }
  10. a.button:hover {
  11. 	text-decoration: none;
  12. }
  13. a.button,
  14. a.button b.o,
  15. a.button b.m {
  16. 	-moz-border-radius: 4px;
  17. 	-webkit-border-radius: 4px;
  18. 	border-radius: 4px;
  19. 	border-width: 1px;
  20. 	border-style: solid;
  21. 	display: block;
  22. }
  23. a.button b.o {
  24. 	border-color: #5A5A5A; /** rgba fallback **/
  25. 	border-color: rgba(0, 0, 0, 0.56);
  26. }
  27. a.button b.m {
  28. 	background: transparent url(button.png) repeat-x 0 0;
  29. 	border-color: #FFF transparent #C7C7C7; /** rgba fallback **/
  30. 	border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
  31. }
  32. a.button:hover b.m {
  33. 	background-position: 0 -80px;
  34. }
  35. a.button:active b.m {
  36. 	background-position: 0 -160px;
  37. 	border-color: #B7B7B7 transparent #D4D4D4; /** rgba fallback **/
  38. 	border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
  39. }
  40. a.button b.m b {
  41. 	display: block;
  42. 	font-weight: bold;
  43. 	padding: 4px 8px;
  44. 	text-shadow: 0 1px 0 #DDD;
  45. 	color: #262626;
  46. 	/** Make the text unselectable **/
  47. 	-moz-user-select: none;
  48. 	-webkit-user-select: none;
  49. }

Report this snippet  

You need to login to post a comment.