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/

  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.