CSS3 Glass Button


/ Published in: CSS
Save to your folder(s)

CSS3 button with a transparent glass effect (looks better on a textured background). A snapshot can be seen <a href="http://demos.pixelworkshop.fr/misc/css_button.jpg">Here</a>


Copy this code and paste it in your HTML
  1. a.button {
  2.  
  3. font-family: 'PT Sans', arial, serif;
  4. color:#ffffff;
  5. text-align:center;
  6. font-size:24px;
  7. font-weight:bold;
  8.  
  9. padding:10px;
  10.  
  11. text-shadow: /* Simulating Text Stroke */
  12. -1px -1px 0 #000,
  13. 1px -1px 0 #000,
  14. -1px 1px 0 #000,
  15. 1px 1px 0 #000;
  16.  
  17. border: 1px solid rgba(0,0,0,0.5);
  18. border-bottom: 3px solid rgba(0,0,0,0.5);
  19.  
  20. border-radius: 3px;
  21. -moz-border-radius: 3px;
  22. -webkit-border-radius: 3px;
  23.  
  24. background: rgba(0,0,0,0.25);
  25.  
  26. box-shadow:
  27. 0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
  28. inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
  29. inset 0 10px rgba(255,255,255,0.2), /* Top Light Shadow */
  30. inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
  31. inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
  32.  
  33. -o-box-shadow:
  34. 0 2px 8px rgba(0,0,0,0.5),
  35. inset 0 1px rgba(255,255,255,0.3),
  36. inset 0 10px rgba(255,255,255,0.2),
  37. inset 0 10px 20px rgba(255,255,255,0.25),
  38. inset 0 -15px 30px rgba(0,0,0,0.3);
  39.  
  40. -webkit-box-shadow:
  41. 0 2px 8px rgba(0,0,0,0.5),
  42. inset 0 1px rgba(255,255,255,0.3),
  43. inset 0 10px rgba(255,255,255,0.2),
  44. inset 0 10px 20px rgba(255,255,255,0.25),
  45. inset 0 -15px 30px rgba(0,0,0,0.3);
  46.  
  47. -moz-box-shadow:
  48. 0 2px 8px rgba(0,0,0,0.5),
  49. inset 0 1px rgba(255,255,255,0.3),
  50. inset 0 10px rgba(255,255,255,0.2),
  51. inset 0 10px 20px rgba(255,255,255,0.25),
  52. inset 0 -15px 30px rgba(0,0,0,0.3);
  53.  
  54. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.