CSS - CSS3 Safari style toolbar buttons rounded box shadow pressed border radius for Moz, Firefox, KHTML


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



Copy this code and paste it in your HTML
  1. /**
  2.  * Author: Chris Morrell <http://cmorrell.com/>
  3.  * Version: 1.1
  4.  * 201008051349 - brandonjp - modified for moz, khtml, css3
  5.  *
  6.  * from http://cmorrell.com/safari-extensions
  7.  *
  8.  * You may use this file any way you see fit.
  9.  *
  10.  */
  11.  
  12. a, button {
  13. color: #282828;
  14. font-weight: bold;
  15. text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
  16. text-decoration: none;
  17. padding: 1px 7px 2px;
  18. display: inline-block;
  19. border-radius: 8px;
  20. cursor: default;
  21. border: none;
  22. background: none;
  23. }
  24.  
  25. a:hover, button:hover {
  26. color: #fff;
  27. text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  28. background: rgba(0, 0, 0, 0.21);
  29. }
  30.  
  31. a:active, button:active, a.toggled, button.toggled {
  32. color: #fff;
  33. text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  34. box-shadow: inset
  35. 0 1px 2px rgba(0, 0, 0, 0.5),
  36. 0 1px 1px rgba(255, 255, 255, 0.8);
  37. -moz-box-shadow: inset
  38. 0 1px 2px rgba(0, 0, 0, 0.5),
  39. 0 1px 1px rgba(255, 255, 255, 0.8);
  40. -khtml-box-shadow: inset
  41. 0 1px 2px rgba(0, 0, 0, 0.5),
  42. 0 1px 1px rgba(255, 255, 255, 0.8);
  43. -webkit-box-shadow: inset
  44. 0 1px 2px rgba(0, 0, 0, 0.5),
  45. 0 1px 1px rgba(255, 255, 255, 0.8);
  46. }
  47.  
  48. a.toggled, button.toggled {
  49. background: rgba(0, 0, 0, 0.35);
  50. }
  51.  
  52. a:active, button:active {
  53. background: rgba(0, 0, 0, 0.49);
  54. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.