button的好样式

.button {  display: inline-block;  white-space: nowrap;  background-color: #ccc;  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee),   to(#ccc) );  background-image: -webkit-linear-gradient(top, #eee, #ccc);  background-image: -moz-linear-gradient(top, #eee, #ccc);  background-image: -ms-linear-gradient(top, #eee, #ccc);  background-image: -o-linear-gradient(top, #eee, #ccc);  background-image: linear-gradient(top, #eee, #ccc);  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',   EndColorStr='#cccccc' );  border: 1px solid #777;  padding: 0 1.5em;  margin: 0.5em;  font: bold 1em/2em Arial, Helvetica;  text-decoration: none;  color: #333;  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);  -moz-border-radius: .2em;  -webkit-border-radius: .2em;  border-radius: .2em;  -moz-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0   rgba(0, 0, 0, .3);  -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0   rgba(0, 0, 0, .3);  box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0   rgba(0, 0, 0, .3); }

.button:hover {  background-color: #ddd;  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa),   to(#ddd) );  background-image: -webkit-linear-gradient(top, #fafafa, #ddd);  background-image: -moz-linear-gradient(top, #fafafa, #ddd);  background-image: -ms-linear-gradient(top, #fafafa, #ddd);  background-image: -o-linear-gradient(top, #fafafa, #ddd);  background-image: linear-gradient(top, #fafafa, #ddd);  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',   EndColorStr='#dddddd' ); }

.button:active {  -moz-box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;  box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;  position: relative;  top: 1px; }

.button:focus {  outline: 0;  background: #fafafa; }

.button:before {  background: #ccc;  background: r  gba(0, 0, 0, .1);  float: left;   1em;  text-align: center;  font-size: 1.5em;  margin: 0 1em 0 -1em;  padding: 0 .2em;  -moz-box-shadow: 1px 0 0 rgba(0, 0, 0, .5), 2px 0 0   rgba(255, 255, 255, .5);  -webkit-box-shadow: 1px 0 0 rgba(0, 0, 0, .5), 2px 0 0   rgba(255, 255, 255, .5);  box-shadow: 1px 0 0 rgba(0, 0, 0, .5), 2px 0 0 rgba(255, 255, 255, .5);  -moz-border-radius: .15em 0 0 .15em;  -webkit-border-radius: .15em 0 0 .15em;  border-radius: .15em 0 0 .15em; }