website/blueprint/plugins/buttons/screen.css

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