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

En esta guía veremos algunos consejos CSS que nos pueden ayudar a estilizar botones.

Es necesario conocer las pseudoclases :hover, :active y algunas propiedades básicas como border-radius, cursor y box-shadow.

También es de menester saber aplicar gradientes para el fondo.

En mi opinión los más importante de todo es conseguir que un usuario nunca tenga duda de que está ante un botón.

Es preferible no alardear de efectos pero incitar al visitante web a entender que se espera de él que haga clic.

Dar forma al botón: la propiedad border-radius

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%.

Propiedades a combinar con el pseudo-selector :hover

[vc_custom_heading text=»Personalizar el ratón: la propiedad cursor» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]La propiedad cursor sirve para modificar el ratón.
Los ejemplos que más me gustan son:

cursor: pointer | zoom-in | zoom-out | crosshair | progress | not-allowed | none;

Sin embargo, si queréis ver la lista entera podéis hacerlo en este enlace.

Para mi los más útiles son:

.boton-1:hover{cursor:pointer;}/*Para botones*/
.boton-2:hover{cursor:not-allowed;} /*Para formularios no activos*/

[vc_custom_heading text=»Personalizar el contorno: la propiedad box-shadow» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

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;}

Fondos

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.)

¿Es imprescindible la etiqueta <a> o <button>?

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.

Ejemplo de creación de un botón

[vc_raw_html]JTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3R5bGUlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMkElN0Jib3gtc2l6aW5nJTNBYm9yZGVyLWJveCUzQiU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGElNUJjbGFzcyUyMCUyQSUzRCUyMmJvdG9uLSUyMiU1RCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGNvbG9yJTNBJTIzZmZmJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwdGV4dC1kZWNvcmF0aW9uJTNBbm9uZSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHBhZGRpbmclM0EyMHB4JTIwNDBweCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGJvcmRlciUzQTFweCUyMHNvbGlkJTIwJTIzMDAwJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZGlzcGxheSUzQWJsb2NrJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwd2lkdGglM0EyMDBweCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHRleHQtYWxpZ24lM0FjZW50ZXIlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBtYXJnaW4lM0E1MHB4JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwYmFja2dyb3VuZC1jb2xvciUzQSUyM2JiMDBiYiUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMC5ib3Rvbi0xJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwYm9yZGVyLXJhZGl1cyUzQTUwJTI1JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwYm94LXNoYWRvdyUzQTNweCUyMDJweCUyMDVweCUyMDFweCUyMCUyM2NjYyUzQiU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMC5ib3Rvbi0xJTNBaG92ZXIlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjdXJzb3IlM0Fwb2ludGVyJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZm9udC1zdHlsZSUzQWl0YWxpYyUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGJveC1zaGFkb3clM0EzcHglMjAycHglMjAxMHB4JTIwMXB4JTIwJTIzYjBiMGIwJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwY29sb3IlM0ElMjMwMDAlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAuYm90b24tMSUzQWFjdGl2ZSU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGJveC1zaGFkb3clM0EzcHglMjAycHglMjAxNXB4JTIwMXB4JTIzMDAwJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZm9udC13ZWlnaHQlM0Fib2xkJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwY29sb3IlM0ElMjMwMDAlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZzdHlsZSUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUzQ2ElMjBocmVmJTNEJTIyJTIzJTIyJTIwY2xhc3MlM0QlMjJib3Rvbi0xJTIyJTNFQm90b24lMjAxJTNDJTJGYSUzRQ==[/vc_raw_html]

*{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;
}

¡Hola!

Querido lector,

Deseo que estos tips te puedan ser de utilidad. Ahora es cuestión de practicar y sobre todo lo más difícil… ¡tener buen gusto!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!