Hola
Les voy a enseñar a hacer unos botones como estos:
Código HTML:
<script type="text/javascript" src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<a class="btn btn-yellow">Advertencia</a>
<a class="btn btn-black">Negativo</a>
<a class="btn btn-red">Cancelar</a>
<a class="btn btn-blue">Primario</a>
<a class="btn btn-green">Aceptar</a>
Nota: <script type="text/javascript" src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script> Es para incluir el plugin prefixfree, sirve para no tener que usar prefijos (-moz-,-webkit,etc) en el css.
Código CSS:
.btn{
padding:0.5em 1em;
transition:.3s linear;
border-radius:7px;
font.family: 'Helvetica Neue',Helvetica,Arial,Sans-Serif;
font-size:1em;
cursor:default;
display:inline-block;
position:relative;
color:#555;
font-weight:bold;
margin: 40px auto;
user-select:none;
text-shadow:-1px -1px 1px rgba(0,0,0,0.25);
color:#f3f3f3;
border:1px solid #ccc;
box-shadow:0px 3px 1px 0 rgba(0,0,0,0.15);
background-image:linear-gradient(top,transparent,rgba(0,0,0,0.15)),url('http://k32.kn3.net/A91F3FD7F.png');
}
.btn:hover{
background-image:linear-gradient(top,transparent,rgba(0,0,0,0.1)),;
}
.btn:active{
top:2px;
box-shadow:inset 0 0 20px 0 rgba(0,0,0,0.25);
}
.btn.btn-blue{
background-color:#5BA7FF;
border-color:#5396E2;
}
.btn.btn-yellow{
background-color:#FFD23F;
border-color:#E5BD39;
}
.btn.btn-green{
background-color:#4BC65C;
border-color:#45B053;
}
.btn.btn-red{
background-color:#FF6B6B;
border-color:#E46262;
}
.btn.btn-black{
background-color:#515151;
border-color:#515151;
}
Explicación :
.btn{
padding:0.5em 1em; Relleno entre el borde del botón y el texto
transition:.3s linear; Tiempo y tipo de transición
border-radius:7px; Redondeado de bordes
font.family: 'Helvetica Neue',Helvetica,Arial,Sans-Serif; Tipo de letra
font-size:1em; Tamaño de letra
cursor:default; El cursor es la flecha común
display:inline-block; Los muestra en linea
position:relative; Posición relativa (no me digas)
font-weight:bold; Letra negrita
margin: 40px auto; 40 pixeles de margen de arriba y abajo
user-select:none; Que no se seleccione el texto
text-shadow:-1px -1px 1px rgba(0,0,0,0.25); Sombra del texto
color:#f3f3f3; Color de texto
border:1px solid #ccc; Borde
box-shadow:0px 3px 1px 0 rgba(0,0,0,0.15); Sombra
background-image:linear-gradient(top,transparent,rgba(0,0,0,0.15)),url('http://k32.kn3.net/A91F3FD7F.png'); Degradado del fondo y ruido para dar textura. En caso de no funcionar con kn3 cambiar la imagen de host
}
.btn:hover{ Cuando tiene el cursor encima
background-image:linear-gradient(top,transparent,rgba(0,0,0,0.1)); Cambia el degradado del fondo
}
.btn:active{ Cuando se clickea
top:2px; Baja 2 pixeles
box-shadow:inset 0 0 20px 0 rgba(0,0,0,0.25); Sombra interna
}
/*Y lo de abajo es para darle un color y borde distinto a cada botón*/
Bueno, eso seria todo :3
Demo:
Cualquier duda comentar o MP