.button {
background:#7f8c8d;
color:#fff;
display:inline-block;
font-size:1em;
margin:20px;
padding:10px 0;
text-align:center;
vertical-align: middle;
width:100px;
height:80px;
text-decoration:none;
box-shadow:0px 3px 0px #7f8c8d;
font-family : fantasy; 
}
 
.button span {
margin-right:10px;
}
 
/*Colores*/

.button.AmarilloClaro {
background:#F7D358;
box-shadow:0px 3px 0px #F7D358;
}

.button.AmarilloOscuro {
background:#DBA901;
box-shadow:0px 3px 0px #DBA901;
}

.button.Avena { /* Color Avena */
background:#ECF6CE;
box-shadow:0px 3px 0px #ECF6CE;
}

.button.AzulClaro { /* Azul claro */
background:#3498db;
box-shadow:0px 3px 0px #3498db;
}

.button.AzulOscuro { /* Azul oscuro */
background:#0B173B;
box-shadow:0px 3px 0px #0B173B;
}

.button.AzulAyE { /* Azul AyE */
background:#0B2161;
box-shadow:0px 3px 0px #0B2161;
}

.button.AzulConfecamaras { /* Azul Confecámaras */
background:#003F7C;
box-shadow:0px 3px 0px #003F7C;
}

.button.Blanco {
background:#FFFFFF;
box-shadow:0px 3px 0px #FFFFFF;
}

.button.GrisClaro {
background:#A4A4A4;
box-shadow:0px 3px 0px #A4A4A4;
}

.button.GrisClaro {
background:#585858;
box-shadow:0px 3px 0px #585858;
}

.button.Naranja {
background:#e67e22;
box-shadow:0px 3px 0px #b55704;
}

.button.Negro {
background:#000000;
box-shadow:0px 3px 0px #000000;
}

.button.RojoClaro {
background:#FA5858;
box-shadow:0px 3px 0px #FA5858;
}

.button.RojoFuerte {
background:#DF0101;
box-shadow:0px 3px 0px #DF0101;
}

.button.RojoOscuro {
background:#8A0808;
box-shadow:0px 3px 0px #8A0808;
}

.button.VerdeClaro { /* Verde SNC */
background:#82FA58;
box-shadow:0px 3px 0px #82FA58;
}

.button.VerdeOscuro { /* Verde SNC */
background:#0B3B0B;
box-shadow:0px 3px 0px #0B3B0B;
}

.button.VerdeSnc { /* Verde SNC */
background:#4D7933;
box-shadow:0px 3px 0px #4D7933;
}

.button.VerdeEcopetrol { /* Verde Ecopetrol */  
background:#12554A;
box-shadow:0px 3px 0px #12554A;
}


/*Tamaños*/
 
.button.large {
width:450px;
}

.button.medium {
width:350px;
}
 

.button.process {
width: 200px;
height: 40px;
}

.button.menuSaas {
width: 100px;
height: 100px;
}

.button.radius {
border-radius:10px;
}
 
/*Efectos, Hover*/

.button:hover {
box-shadow:0px 0px 0px;
padding-top:7px;
}

span {
  	display: inline-block;
  	vertical-align: middle;
  	line-height: normal;	      
}