Un botón es una parte fundamental de HTML que realiza varias tareas. Mediante el uso de CSS, puede diseñar y diseñar el botón. Hay diferentes formas de diseñar el botón, como colorear el botón, el cambio de tamaño, el rondado y muchas más.

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

Empecemos!

Cómo cambiar el color del botón en el flotador en CSS?

En CSS, ":flotar"Se usa para cambiar el color del botón en el flotador. ":flotar"Es una pseudo-clase que permite cambiar el comportamiento de los elementos HTML cuando un 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 flotar 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"Flotar sobre mi".

Html

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

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

Paso 2: Botón de estilo y Div

Primero, peinaremos el contenedor creado usando "div". Luego, estableceremos la altura del Div como "250px"Y el color de fondo como"RGB (199, 173, 192)". También usaremos la propiedad fronteriza para ajustar el borde del div, ancho como "5px", Estilo como"sólido", Y color como"RGB (40, 2, 55)".

CSS

La salida dada a continuación indica que el estilo agregado se aplica con éxito en el DIV:

En el siguiente paso, peinaremos el botón usando CSS.

Ahora, peinaremos 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 "ninguno"Como valor de propiedad fronteriza. Después de eso, ajustaremos el tamaño de la fuente a "grande"Y el relleno del botón a"10px"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 está diseñado:

Además, aplicaremos ":flotar"Cambiar el color de un botón en el flotador.

Paso 3: Cambiar el color del botón en el flotador

Ahora, usaremos ".BTN: flotante"Para vincular el botón con el elemento de pseudo-clase flotante. Como resultado, se aplicará a Hover al botón. A continuación, estableceremos el color de fondo y el color de texto del botón como "RGB (66, 2, 41)" y "RGB (119, 255, 0)". Estos colores se aplicarán al botón cuando un mouse sobre él:

En la salida proporcionada a continuación, puede ver que el color del botón cambia cuando un mouse se desplaza:

Eso es todo! Hemos explicado el método para cambiar el color del botón en el ronco usando CSS.

Conclusión

Para cambiar el color de un botón en el flotador, el ":flotarSe utiliza el elemento pseudo-clase. Para hacerlo, vincule el botón con: desplegue y establezca el color del botón, que cambiará cuando nos desplazaremos en él. En este artículo, hemos explicado el método para cambiar el color del botón en el flotador y proporcionados un ejemplo de ello.