/* CSS PARA BOTONES*/
.botones, .botones:visited { /* botones genéricos */
  background: #222 url(overlay.png) repeat-x;
  display: inline-block;
  padding: 5px 10px 6px;
  color: #FFF;
  text-decoration: none;
  border-radius: 6px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative;
  cursor:pointer
}
.botones:hover { /* el efecto hover */
  background-color: #111
  color: #FFF;
  text-decoration:none;
}
.botones:active{  /* el efecto click */
  top: 1px;
}

 /* botones pequeños */
.small.botones, .small.botones:visited {
  font-size: 11px ;
}

 /* botones medianos */
.botones, .botones:visited,.medium.botones, .medium.botones:visited {
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

 /* botones grandes */
.large.botones, .large.botones:visited {
  font-size:14px;
  padding: 8px 14px 9px;
}

 /* botones extra grandes */
.super.botones, .super.botones:visited {
  font-size: 34px;
  padding: 8px 14px 9px;
}
/* los colores de los botones*/
.pink.botones { background-color: #E22092; }
.pink.botones:hover{ background-color: #C81E82; }

.green.botones, .green.botones:visited { background-color: #91BD09; }
.green.botones:hover{ background-color: #749A02; }

.red.botones, .red.botones:visited { background-color: #E62727; }
.red.botones:hover{ background-color: #CF2525; }

.orange.botones, .orange.botones:visited { background-color: #FF5C00; }
.orange.botones:hover{ background-color: #D45500; }

.blue.botones, .blue.botones:visited { background-color: #0478BF; }
.blue.botones:hover{ background-color: #2575CF; }

.yellow.botones, .yellow.botones:visited { background-color: #FFB515; }
.yellow.botones:hover{ background-color: #FC9200; }

/*
¿Cómo usarlos, agregando las clases a cualquier enlace:

<a href="#" class=" botones orange"> botón naranja pequeño </a>
<a href="#" class="medium botones blue"> botón azul mediano </a>
<a href="#" class="large botones red"> botón rojo grande </a>
<a href="#" class="super botones pink"> botón rosa exra grande </a>
*/