Advanced Search

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

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

Expand | Embed | Plain Text

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.