Guía rápida para crear botones personalizados con CSS

La propiedad border-radius sirve para redondear las esquinas de una caja html.

Por ejemplo:

.boton-4{border-radius:0 50% 0 50%;}
.boton-5{border-radius:50%;}
.boton-6{border-radius:50% 50% 0 0;}

La expresión se puede escribir minimizada o no siguiendo la regla del reloj.

• La primera cifra indica la esquina superior izquierda.
• La segunda cifra indica la esquina superior derecha.
• La tercera cifra indica la esquina inferior derecha.
• La cuarta cifra indica la esquina inferior izquierda.

Recordar que nadie obliga a indicar las unidades en píxeles. Por ejemplo también pueden ir en porcentajes, siendo para el caso de border-radius el mayor porcentaje que tiene sentido el 50%.

La propiedad box-shadow sirve para dar contorno al botón.

El contorno puede ser sólido o una sombra.

box-shadow: desplazamientoHorizontal desplazamientoVertical difuminado extendido color;
 Ejemplo: .caja-1{10px 5px 5px 5px red;}

De los ejemplos en la imagen fijaros especialmente en el cuarto botón que no tiene sombra. Al no haberse desplazado y no haberle asignado la propiedad extendido este es el efecto: es como si no hubiera pasado prácticamente nada. Tan sólo un pequeño difuminado alrededor del botón.

También observar el último de todos. No hay desplazamiento pero si haber difuminado + extendido se aprecia como una especie de borde que contornea todo el botón.

Como curiosidad podemos aplicar distintas sombras una al lado de otra. Probar por ejemplo:

.caja-1{10px 5px 5px 5px red, 10px 5px 5px 5px green; 10px 5px 5px 5px blue;}

Podemos asignar un fondo mediante la propiedad background-color o bien mediante background-image.

En el primer caso puede ser un color uniforme o un gradiente de color, pudiendo ser lineal o radial.

En el segundo caso hay que tener la precaución de posicionar la imagen e indicar si se debe repetir verticalmente y/o horizontalmente o no.

(Esta sección queda pendiente de desarrollar.)

Esta parte es para aquellos que les guste la programación. Os invito a leer el tutorial javascript de este mismo blog.

Mediante javascript podemos sustituir perfectamente un enlace o una etiqueta <button> sin problema.

El código sería algo parecido a

nodo.addEventListener("click",function(){window.alert("saludo"});

Por tanto podemos hacer un botón con un <div>, <span>, <label> o lo que necesitamos en cada momento.

*{box-sizing:border-box;}
a[class *="boton-"]{
    color:#fff;
    text-decoration:none;
    padding:20px 40px;
    border:1px solid #000;
    display:block;
    width:200px;
    text-align:center;
    margin:50px;
    background-color:#bb00bb;
}

.boton-1{
    border-radius:50%;
    box-shadow:3px 2px 5px 1px #ccc;}
.boton-1:hover{
    cursor:pointer;
    font-style:italic;
    box-shadow:3px 2px 10px 1px #b0b0b0;
    color:#000;
}
.boton-1:active{
    box-shadow:3px 2px 15px 1px#000;
    font-weight:bold;
    color:#000;
}