¡Hola!
Este tutorial lo hago como parte del curso de Frontend Developer.
Aquí voy a editar un botón con los conceptos vistos en el curso.
Partamos de la etiqueta HTML que hace un botón. <button></button>. En esta etiqueta el texto que se ponga entre la apertura y cierre sera el texto por defecto que aparece en el botón. Voy a centrarlo en la mitad de la página para que podamos verlo.
Ahora que tenemos el botón centrado, vamos a darle estilo. Recordemos las reglas background (para el color de fondo), color (para el color de texto), width (ancho), height (alto), y font-size (tamaño de fuente). En mi caso voy a usar los que suelo usar en mi marca personal.
Ahora algo que también se puede hacer es hacer los bordes redondeados y dar una sombra. esto se hace respectivamente con border-radius y box-shadow. En mis líneas de CSS verás que usé varios argumentos en box-shadow. Vamos a ver:
En este caso, la sombra que se establece es una sombra oscura con una difuminación de 10px y un color especificado por rgba(0, 0, 0, 0.4). Los valores 0 0 especifican la distancia horizontal y vertical de la sombra desde el elemento. El valor 10px especifica la difuminación (también conocida como difusión o blur) de la sombra, lo que afecta su suavidad. El valor rgba(0, 0, 0, 0.4) define el color de la sombra, donde rgba significa rojo-verde-azul-alfa, y el último valor 0.4 representa el canal alfa que controla la opacidad de la sombra (en este caso, una opacidad del 40%).
Finalmente, me gustaría que el botón cambiara un poco si paso el mouse por encima. Esto se puede lograr con la pseudoclase :hover.
Dentro de la pseudoclase, quiero cambiar el color de fuente y fondo, que lo puedo hacer como lo mostré en los primeros pasos de la guía.