Guía rápida para estilos CSS en botones


Los botones se han convertido en una parte imprescindible del desarrollo de frontales. Por tanto, es importante tener en cuenta varías cosas antes de dar estilo a los botones. He reunido algunas de las maneras de darles estilo usando CSS. Podemos combinar también la mayoría de métodos para crear un nuevo estilo. Para crear CSS para degradados, podemos usar https://uigradients.com.

Un sencillo botón «Primeros pasos»

/* Crear degradados */

/* Dar bordes curvados a btn */

/* Al poner el curso encima (hover) */

Botón con fondo transparente

/* Color del texo */

/* Eliminar color de fondo */

/* Grosor del borde, estilo de línea y color */

/* Añadir esquinas curvadas */

/* Poner texto en mayúsculas */

/* Al poner el curso encima (hover) */

Botón con entidades CSS

Puedes encontrar el listado completo de entidades CSS aquí (en inglés)
https://www.w3schools.com/cssref/css_entities.asp
También puedes usar entidades HTML, pero están limitadas.
https://www.w3schools.com/html/html_entities.asp

Botón con animación al hacer clic

CSS: (SCSS)

Javascript: (JQuery)

Botón con imagen

Botones con iconos


index.html

style.css

Conclusión

En este tutorial hemos aprendido a personalizar botones usando CSS y algo de JavaScript en el caso que sea necesario una función ‘después del clic’. También puedes usar CSS3ButtonGenerator para generar botones sencillos. Contacta conmigo si tienes alguna dudad.
Si te ha gustado este artículo y te ha ayudado, !puedes darme algún aplauso!

Nota: puedes encontrar el artículo original en https://medium.freecodecamp.org/a-quick-guide-to-styling-buttons-using-css-f64d4f96337f

Un pensamiento en “Guía rápida para estilos CSS en botones

  1. Pingback: Por qué Angular (2, 4, 5 y 6) no mola – Developing in Spanish

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *