screen.css 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. /* --------------------------------------------------------------
  2. buttons.css
  3. * Gives you some great CSS-only buttons.
  4. Created by Kevin Hale [particletree.com]
  5. * particletree.com/features/rediscovering-the-button-element
  6. See Readme.txt in this folder for instructions.
  7. -------------------------------------------------------------- */
  8. a.button, button {
  9. display:block;
  10. float:left;
  11. margin: 0.7em 0.5em 0.7em 0;
  12. padding:5px 10px 5px 7px; /* Links */
  13. border:1px solid #dedede;
  14. border-top:1px solid #eee;
  15. border-left:1px solid #eee;
  16. background-color:#f5f5f5;
  17. font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  18. font-size:100%;
  19. line-height:130%;
  20. text-decoration:none;
  21. font-weight:bold;
  22. color:#565656;
  23. cursor:pointer;
  24. }
  25. button {
  26. width:auto;
  27. overflow:visible;
  28. padding:4px 10px 3px 7px; /* IE6 */
  29. }
  30. button[type] {
  31. padding:4px 10px 4px 7px; /* Firefox */
  32. line-height:17px; /* Safari */
  33. }
  34. *:first-child+html button[type] {
  35. padding:4px 10px 3px 7px; /* IE7 */
  36. }
  37. button img, a.button img{
  38. margin:0 3px -3px 0 !important;
  39. padding:0;
  40. border:none;
  41. width:16px;
  42. height:16px;
  43. float:none;
  44. }
  45. /* Button colors
  46. -------------------------------------------------------------- */
  47. /* Standard */
  48. button:hover, a.button:hover{
  49. background-color:#dff4ff;
  50. border:1px solid #c2e1ef;
  51. color:#336699;
  52. }
  53. a.button:active{
  54. background-color:#6299c5;
  55. border:1px solid #6299c5;
  56. color:#fff;
  57. }
  58. /* Positive */
  59. body .positive {
  60. color:#529214;
  61. }
  62. a.positive:hover, button.positive:hover {
  63. background-color:#E6EFC2;
  64. border:1px solid #C6D880;
  65. color:#529214;
  66. }
  67. a.positive:active {
  68. background-color:#529214;
  69. border:1px solid #529214;
  70. color:#fff;
  71. }
  72. /* Negative */
  73. body .negative {
  74. color:#d12f19;
  75. }
  76. a.negative:hover, button.negative:hover {
  77. background-color:#fbe3e4;
  78. border:1px solid #fbc2c4;
  79. color:#d12f19;
  80. }
  81. a.negative:active {
  82. background-color:#d12f19;
  83. border:1px solid #d12f19;
  84. color:#fff;
  85. }