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 13a.button, input.button, button { 14 display:block; 15 float:left; 16 margin:0 0.583em 0.667em 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} 32button { 33 width:auto; 34 overflow:visible; 35 padding:4px 10px 3px 7px; /* IE6 */ 36} 37button[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} 44button img, a.button img, input.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 */ 58button:hover, input.button:hover, a.button:hover{ 59 background-color:#dff4ff; 60 border:1px solid #c2e1ef; 61 color:#336699; 62} 63a.button:active{ 64 background-color:#6299c5; 65 border:1px solid #6299c5; 66 color:#fff; 67} 68 69/* Positive */ 70body .positive { 71 color:#529214; 72} 73a.positive:hover, button.positive:hover { 74 background-color:#E6EFC2; 75 border:1px solid #C6D880; 76 color:#529214; 77} 78a.positive:active { 79 background-color:#529214; 80 border:1px solid #529214; 81 color:#fff; 82} 83 84/* Negative */ 85body .negative { 86 color:#d12f19; 87} 88a.negative:hover, button.negative:hover { 89 background:#fbe3e4; 90 border:1px solid #fbc2c4; 91 color:#d12f19; 92} 93a.negative:active { 94 background-color:#d12f19; 95 border:1px solid #d12f19; 96 color:#fff; 97} 98