Botón CSS haciendo clic
Ejemplo 01: Uso de CSS para hacer un botón produce un efecto de rebote en un archivo HTML
En este ejemplo, utilizaremos CSS de etiqueta de estilo para que un botón se transforme en un efecto de clic. Nos centraremos en el efecto posterior de un clic en el botón y animaremos el botón para producir un efecto de clics.
Hemos abierto una etiqueta de estilo en el encabezado del archivo en el que definiremos el estilo del botón en una clase separada que se puede llamar en cualquier etiqueta de botón a lo largo del archivo. Abriremos el paréntesis después de darle un nombre a la clase. Luego, comenzaremos dándole relleno (en píxeles) para ajustar el botón en la página. Entonces daremos el color de fondo del botón. Después de esto, se utilizará la propiedad de la bandeja de caja. El valor constaría el formato de píxel para la sombra y el formato RGBA para el color de la sombra. Entonces, le daremos al botón un cursor de puntero. Cuando se haga clic en el botón, el cursor se transformará debido a esta propiedad. La última propiedad será la propiedad de transición que especificará el tiempo de reacción de la animación del botón.
Después de cerrar el paréntesis, clasificaremos otra función para esta clase por separado. En esta función, especificaremos la escala de transformación y el cambio en la sombra del borde utilizando el mismo formato que utilizamos anteriormente. Después de esto, abriremos la etiqueta del cuerpo y le daremos un encabezado y un botón. En la etiqueta del botón, mencionaremos el nombre de la clase que acabamos de crear en la etiqueta de estilo presente en el encabezado del archivo.
Podemos ver que el botón en la salida anterior tiene una sombra y el relleno es visible. Aunque, la animación sería más visible en el navegador, pero el estilo es más visible en el fragmento anterior.
Ejemplo 02: Uso de CSS para hacer que un botón rebote en un archivo HTML
En este ejemplo, utilizaremos etiquetas de estilo CSS para hacer un botón de rebote cuando se haga clic en. Nos concentraremos en el resultado de un botón Haga clic y animaremos el botón para producir un efecto de rebote.
En el script anterior, hemos abierto una etiqueta de estilo en el encabezado del archivo para especificar el estilo del botón. El estilo del botón se almacena en una clase separada que se puede usar en cualquier etiqueta de botón a lo largo del proyecto. Después de haberle dado el nombre a la clase A, abriremos los paréntesis de la clase. Primero, le daremos al botón un cursor de puntero para que cuando haga clic, el cursor cambie. Luego, agregaremos algo de relleno (en píxeles) para cambiar la posición del botón en la página. Por último, estableceremos el color de fondo del botón. Después de eso, la propiedad de la bandeja de caja se utilizará con el valor que consiste en formato de píxel para el formato Shadow y RGBA para el color de la sombra. También lo alinearemos.
Después de cerrar los paréntesis de la clase, clasificaremos otra función para esta clase.Especificaremos la escala de transformación y los cambios en la sombra del borde en el mismo formato que utilizamos en la propiedad anterior. Después de eso, abriremos la etiqueta del cuerpo y le agregaremos un encabezado y un botón. En nuestra etiqueta de botón, declararemos el nombre de la clase que acabamos de construir la etiqueta de estilo en el encabezado de nuestro archivo.
Podemos ver que el botón en la captura de pantalla anterior tiene todo el estilo que especificamos en el estilo y la animación de hacer clic en el botón se notaría en el navegador.
Ejemplo 03: Uso de CSS para transformar el color del botón después de hacer clic en él
En este ejemplo, cambiaremos el color de un botón cuando se haga clic en. Usaremos CSS en este ejemplo y todo el estilo se definirá en la etiqueta de estilo para el elemento del botón.
En el script anterior, abriremos una etiqueta de estilo en el encabezado del archivo. Luego, definiremos las propiedades de estilo para el botón predeterminado que proporciona el lenguaje de marcado de hipertexto. En la etiqueta de estilo, comenzaremos dando el botón de color amarillo de fondo. Después de esto, llamaremos a la clase de botones con la propiedad de transición de enfoque y en su paréntesis. Definiremos el color de fondo que será diferente del color de fondo previamente definido. Esto dará como resultado un cambio de color cuando se haga clic en el botón.
Ahora abriremos este archivo HTML en nuestro navegador y observaremos la transformación del botón.
En este fragmento, podemos ver que el botón tiene el estilo definido en la primera propiedad de la etiqueta de estilo, y cuando hacemos clic en él, obtenemos la siguiente salida:
El botón se ha transformado después del clic y el color ahora está rojo como se define en el botón de enfoque paréntesis.
Ejemplo 04: Uso de CSS para cambiar la forma de un botón después de hacer clic en él
Cuando se hace clic en un botón, modificaremos su forma en este ejemplo. En este ejemplo, aplicaremos CSS. Todo el estilo se definirá en la etiqueta de estilo para el elemento del botón. La propiedad de enfoque de botón que dará como resultado cambiar la forma y el color del botón.
Abriremos una etiqueta de estilo en el encabezado del archivo y proporcionaremos las propiedades de estilo para el botón predeterminado proporcionado por el lenguaje de marcado de hipertexto en el script anterior. En la etiqueta de estilo, comenzaremos haciendo rojo el fondo del botón y asignando un tamaño al texto por la propiedad del tamaño de una fuente. Después de eso, llamaremos a la clase de botones con la propiedad de transición de enfoque y definiremos el color de fondo. Será diferente del color de fondo mencionado anteriormente, que es morado. Luego, agregaremos la propiedad Border-Radius y le asignaremos un valor en píxeles. Entonces, cuando se hace clic en el botón, la forma y el color cambiarán.
La salida anterior muestra el estado del botón antes de que se haga clic. El botón tiene un borde rectangular con fondo rojo y si hacemos clic en el botón, obtendremos la siguiente salida:
Ahora podemos ver la transformación del color y la forma del botón ya que el borde tiene bordes redondeados y fondo morado.
Conclusión
En este artículo, buscamos diferentes ejemplos de que CSS nos permite crear un efecto en un elemento de botón del lenguaje de marcado de hipertexto cuando se hace clic. Utilizamos el enfoque de etiqueta de estilo para agregar CSS al elemento del botón en este artículo. Nos centramos en la transformación del color, la forma y la sombra del botón e incluso agregamos algunas animaciones al botón cuando se haga clic en. Utilizamos el Notepad ++ IDE para implementar estos ejemplos en este artículo.