Botones CSS – Diseño y accesibilidad

3d.css

.btn-3d {
  padding: .6rem 1rem;
  border: 1px solid #995309;
  border-radius: 4px;
  background-color: #d9750b;
  color: #fff;

  font-size: 1.5rem;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
    0 1px 3px rgba(0,0,0,.2);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#f90),to(#e76a00));
  background-image: linear-gradient(#f90 10%,#e76a00 100%);
}

.btn-3d:hover, .btn-3d:focus {
  background-color: #e0811b;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#f0a100),to(#f70));
  background-image: linear-gradient(#f0a100 10%,#f70 100%);
}

.btn-3d:active {
  background-color: #cf6a00;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#f0a100),to(#f70));
  background-image: linear-gradient(#f0a100 10%,#f70 100%);
}

base.css

.btn {
  /* Para <button> */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;

  /* Para <a> */
  display: inline-block;
  text-decoration: none;

  /* Otros */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;
}

bootstrap.css

.btn-bootstrap {
  padding: .375rem .75rem;
  border-radius: .25rem;
  background-color: #007bff;
  color: #fff;
  transition: background-color .15s ease-in-out;
}

.btn-bootstrap:hover, .btn-bootstrap:focus {
  background-color: #0069d9;
}

.btn-bootstrap:active {
  background-color: #0062cc;
}

borde.css

.btn-borde {
  padding: .375rem .75rem;
  border: 1px solid #007bff;
  border-radius: .25rem;
  color: #007bff;
  transition: color .15s ease-in-out,
    background-color .15s ease-in-out;
}

.btn-borde:hover, .btn-borde:active, .btn-borde:focus {
  color: #fff;
  background-color: #007bff;
}

enlace.css

.btn-enlace {
  position: relative;
  padding: 6px 16px;
  border-radius: .25rem;
  background-color: #28a745;
  color: #fff;
  transition: background-color .15s ease-in-out,
    top .15s ease-in-out, left .15s ease-in-out;
}

.btn-enlace:hover, .btn-enlace:focus {
  background-color: #218838;
}

.btn-enlace:active {
  top: 2px;
  left: 2px;
}

material.css

.btn-material {
  padding: 0 16px;
  border-radius: 2px;
  background-color: #018786;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
  transition: background-color 15ms linear,
    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);

  height: 36px;
  line-height: 2.25rem;
  font-family: Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.btn-material:hover, .btn-material:focus {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: #159090;
}

.btn-material:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
  background-color: #61b4b3;
}