Chained Buttons skin by AO3 

Please DO copy and reuse and modify this code any way you like! CSS3 Buttons you can chain in to your own designCREDITS: http://www.red-team-design.com/just-another-awesome-css3-buttons
Role:
user
Media:
screen
Condition:
Normal

CSS

#outer .actions a,
#outer #header .actions a,
#outer #footer .actions a,
#greeting .actions a,
.symbol .question,
.actions input,
input[type="submit"],
button,
#outer .current,
.actions label {
  background-image: -moz-linear-gradient(#fff 2%,#ddd 95%, #bbb 100%);
}

#outer .actions a,
#outer #header .actions a,
#outer #footer .actions a,
#greeting .actions a,
.symbol .question,
.actions input,
input[type="submit"],
button,
#outer .current,
.actions label {
  background-image: -webkit-linear-gradient(#fff 2%,#ddd 95%, #bbb 100%);
}

#outer .actions a,
#outer #header .actions a,
#outer #footer .actions a,
#greeting .actions a,
.symbol .question,
.actions input,
input[type="submit"],
button,
#outer .current,
.actions label {
  background-image: -o-linear-gradient(#fff 2%,#ddd 95%, #bbb 100%);
}

#outer .actions a,
#outer #header .actions a,
#outer #footer .actions a,
#greeting .actions a,
.symbol .question,
.actions input,
input[type="submit"],
button,
#outer .current,
.actions label {
  background-image: -ms-linear-gradient(#fff 2%,#ddd 95%, #bbb 100%);
}

#outer .actions a,
#outer #header .actions a,
#outer #footer .actions a,
#greeting .actions a,
.symbol .question,
.actions input,
input[type="submit"],
button,
#outer .current,
.actions label {
  background-image: linear-gradient(#fff 2%,#ddd 95%, #bbb 100%);
}

#outer .actions a,
#outer #header .actions a,
#outer #footer .actions a,
#greeting .actions a,
.symbol .question,
.actions input,
input[type="submit"],
button,
#outer .current,
.actions label {
  white-space: nowrap;
  text-align: left;
  height: auto;
  border: 1px solid #777;
  padding: 0 1.5em;
  margin: 0.5em 0.25em;
  font-weight: bold;
  font-size: 0.875em;
  line-height: 1.75em;
  font-family: Helvetica,Arial, sans-serif;
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: .2em;
  box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);
}

#outer .actions a:hover,
#outer .actions a:focus,
#outer #header .actions a:hover,
#outer #header .actions a:focus,
.symbol .question:hover,
.symbol .question:focus,
.actions input:hover,
.actions input:focus,
#outer input[type="submit"]:hover,
#outer input[type="submit"]:focus,
button:hover,
button:focus.actions label:hover,
.actions label:focus {
  color: #555;
  box-shadow: inset -5px -10px 10px rgba(0,0,0,0.2);
}

.actions a:active,
#outer .current {
  position: relative;
  top: 1px;
  background: rgba(0,0,0,0.15);
  box-shadow: 0 0 4px 2px rgba(0,0,0,.4) inset;
}

.actions a:focus {
  outline: 0;
  background: #fafafa;
}

.actions a:before,
.actions input:before,
.actions label:before,
#outer .current:before {
  background: rgba(0,0,0,.1);
  float: left;
  width: 1em;
  text-align: center;
  font-size: 1.5em;
  margin: 0 1em 0 -1em;
  padding: 0 .2em;
  box-shadow: 1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5);
  border-radius: .15em 0 0 .15em;
}

.actions a:before,
.actions label:before,
#outer .current:before {
  content: "•";
}

.symbol .question {
  padding: 0.15em 0;
}

input[type="submit"] {
  height: 1.929em;
}

#inner li.blurb .stats {
  margin: 0.643em auto 1em;
  padding: 0;
}

#outer #footer .actions a {
  display: inline-block;
}

#outer #footer .actions a:before {
  margin-right: 0.2em;
}