Un botón es una parte fundamental de HTML que realiza varias tareas. Al usar CSS, puede diseñar y diseñar el botón. Hay diferentes formas de diseñar el botón, como colorear el botón, cambiar el tamaño, pasar el mouse por encima y muchas más.

En este artículo, primero, aprenderemos cómo crear un botón, luego cambiaremos el color de un botón al pasar el mouse.

¡Empecemos!

¿Cómo cambiar el color del botón al pasar el mouse en CSS?

En CSS, “ :flotar ” se usa para cambiar el color del botón al pasar el mouse por encima. “ :flotar ” es una pseudoclase que permite cambiar el comportamiento de los elementos HTML cuando se pasa el mouse sobre él, como elementos como enlaces, botones, imágenes y muchos más.

la sintaxis de :flotar se proporciona a continuación.

Sintaxis

En la sintaxis proporcionada anteriormente, “ a ” se refiere al elemento HTML donde el “ :flotar ' Está aplicado. En CSS, puede establecer el comportamiento de desplazamiento de los elementos HTML, como el color, el tamaño y el ancho del elemento.

Paso 1: Crear Div y Botón

En el HTML, primero, crearemos un div y agregaremos un encabezado con

y un botón usando una etiqueta. Aquí, asignaremos el nombre de clase del botón como ' btn ” y el texto del botón como “ Pasa el cursor sobre mí ”.

HTML

El resultado del código mencionado anteriormente se muestra a continuación. Puede ver que se crean el encabezado y el botón:

Ahora, vaya al CSS para diseñar el div y el botón uno por uno.

Paso 2: botón de estilo y división

Primero, diseñaremos el contenedor creado usando ' división ”. Luego, estableceremos la altura del div como ' 250px ” y el color de fondo como “ rgb(199, 173, 192) ”. También usaremos la propiedad border para ajustar el borde del div, ancho como ' 5px ”, estilo como “ sólido ”, y el color como “ rgb(40, 2, 55) ”.

CSS

El resultado que se muestra a continuación indica que el estilo agregado se aplicó con éxito en el div:

En el siguiente paso, diseñaremos el botón usando CSS.

Ahora, diseñaremos el botón usando ' .btn ” para acceder al botón que se crea en HTML. Después de eso, ocultaremos el borde del botón configurando ' ninguna ” como el valor de la propiedad de borde. Después de eso, ajustaremos el tamaño de fuente a “ largo ” y el relleno del botón a “ 10 píxeles ” para crear espacios entre el contenido del botón y el borde del botón. Al final, estableceremos el color del texto y el fondo como “ rgb(50, 0, 54) ' y ' RGB (193, 54, 135) ”:

El botón ahora tiene un estilo:

Además, aplicaremos “ :flotar ” para cambiar el color de un botón al pasar el mouse.

Paso 3: cambiar el color del botón al pasar el mouse

Ahora, usaremos “ .btn: flotar ” para vincular el botón con el elemento flotante de pseudoclase. Como resultado, se aplicará el desplazamiento al botón. A continuación, estableceremos el color de fondo y el color del texto del botón como ' RGB (66, 2, 41) ' y ' rgb(119, 255, 0) ”. Estos colores se aplicarán al botón cuando pase el mouse sobre él:

En el resultado proporcionado a continuación, puede ver que el color del botón cambia cuando se pasa el mouse sobre él:

¡Eso es todo! Hemos explicado el método para cambiar el color del botón al pasar el mouse usando CSS.

Conclusión

Para cambiar el color de un botón al pasar el mouse, el ' :flotar Se utiliza un elemento de pseudoclase. Para hacerlo, vincula el botón con :hover y establece el color del botón, que cambiará cuando pasemos el mouse sobre él. En este artículo, explicamos el método para cambiar el color del botón al pasar el mouse y brindamos un ejemplo.