¡Hola mundo!, en este tutorial aprenderemos cómo crear un botón en CSS que cambie al pasar el mouse por encima utilizando pseudo clases.
Primero, debemos saber que una pseudo clase en CSS es un selector que nos permite estilizar la función o estado de un elemento con respecto a la interactividad del usuario. Por ejemplo, podemos cambiar el color de un elemento cuando el puntero del mouse está encima de él o cuando presionamos un botón, como lo vamos a mostrar en este tutorial.
¡Comencemos!
Primero, creamos un contenedor (opcional) en donde añadiremos nuestro botón:
<body> <div class="container"> <input type="button" value="Hover-button"> </div> </body>
Añadimos la etiqueta <style></style> en nuestro head para añadir los estilos. En mi caso, quiero que mi body no tenga márgenes, que tenga un display tipo flexible, que sus elementos se centren horizontalmente y que la página entera tenga un color oscuro de fondo, de esta manera:
body { display: flex; margin: 0; justify-content: center; background-color: #0C134F; }
Ahora, a mi contenedor voy a posicionarlo en la página verticalmente usando un % que permite ubicarlo más o menos en el centro, que tenga un tamaño de alto y ancho de 100px. Quiero que sea en forma de círculo y para ello le coloco un radio de borde. Además, deseo que los elementos que se encuentren dentro del contenedor no se salgan de sí mismo, así:
div { position: absolute; width: 100px; height: 100px; top: 45%; border-radius: 50%; overflow: hidden; }
A continuación, quiero que mi botón ocupe todo el ancho de su contenedor y que no tenga borde, que tenga un color de fondo predeterminado y un color de fuente, así:
input { width: 100%; border: none; background-color: #1D267D; color: aliceblue; }
Ahora, vamos a estilizar la interactividad de nuestro botón con el mouse. Primero, vamos a decirle que cambie el color del botón cuando el mouse esté encima de él. Para esto usamos input con la pseudo clase :hover, así:
input:hover { background-color: #5C469C; }
Luego, vamos a decirle que cambie nuevamente de color cuando presionamos nuestro botón. Para esto usamos input con la pseudo clase active, así:
input:active{ background-color: #D4ADFC; }
De esta manera, le decimos al navegador que el botón debe cambiar de color al poner el mouse encima de él y también cada vez que lo presionamos.
¡Espero haberte ayudado en este tutorial, hasta la próxima!
