Imagen del botón CSS
Ejemplo 01: Uso de la etiqueta de estilo CSS para agregar una imagen en un botón en un archivo HTML
En este ejemplo, agregaremos una imagen dentro de un botón usando la etiqueta de estilo CSS en el encabezado del archivo. Dentro de la etiqueta de estilo, construiremos una clase para el botón, que se llamará más adelante en el cuerpo. Luego, crearemos un script en el que agregaremos una imagen a un botón utilizando la técnica que mencionamos anteriormente.
En el script anterior, abrimos una etiqueta de estilo en el encabezado del archivo. En esta etiqueta, abrimos los parámetros de la clase de botón en los que definiremos varias propiedades de diseño para el elemento del botón. Primero, agregamos la imagen para el fondo del botón. Podemos agregar la imagen a través de "URL" o "SRC". Luego agregamos la propiedad de tamaño de fondo que se establece como una "cubierta". Luego definimos el ancho y la altura del botón también. Después de esto, cerramos la etiqueta de estilo y nos movemos a la etiqueta del cuerpo. En esta etiqueta, agregamos un encabezado usando la etiqueta H1. Entonces, se llama a la etiqueta del botón. En esta etiqueta, llamamos a la clase de estilo que creamos anteriormente para heredar todo el estilo que se definen en la clase. Luego, cerramos todas las etiquetas restantes y guardamos el archivo en el formato HTML.
Como podemos ver en la salida anterior, la imagen aparece como un botón en la página de nuestro navegador junto con el encabezado. Esto justifica que la clase de estilo fue heredada con éxito por la etiqueta del botón.
Ejemplo 02: Agregar una imagen en un botón utilizando un enfoque CSS en línea
En este caso, agregaremos una imagen a un botón utilizando el enfoque CSS en línea. Agregaremos una imagen a un elemento de botón predeterminado del lenguaje de marcado de hipertexto dándole la URL de una imagen en este método. Ahora, echemos un vistazo al guión de esta técnica.:
En el script reflejado en la imagen, podemos ver que el encabezado del archivo está vacío porque usaremos el enfoque CSS en línea en este ejemplo. Abrimos nuestra etiqueta de botón. En la etiqueta, mencionamos el CSS que queremos que el botón tenga en la propiedad de estilo. Mencionamos todo el estilo en esta propiedad y los separamos con semicolones. También agregamos una imagen usando la palabra clave de imagen de fondo y asignamos una imagen a través de URL. Entonces la etiqueta del botón está cerrada junto con la etiqueta del cuerpo. Después de esto, abrimos este archivo HTML en nuestro navegador.
El resultado anterior es una evidencia de que el enfoque de etiqueta de estilo en línea ha sido un éxito. Podemos ver que la imagen se agrega al botón y el botón predeterminado ahora se transforma en una imagen.
Ejemplo 03: Uso de las etiquetas de estilo CSS para agregar una imagen a un botón cuando se cierne
Agregaremos una imagen a un botón que aparecerá solo cuando el botón se robe en este ejemplo. Usaremos la etiqueta de estilo CSS para proporcionar un botón con dicho comportamiento en un archivo HTML. Crearemos una clase separada para segregar este estilo para un elemento específico en este ejemplo. Para lograr este objetivo, debemos escribir el siguiente script:
En el script anterior, abrimos nuestra etiqueta de cabeza para el archivo HTML. En esta etiqueta, el estilo del botón se define abriendo una clase para el elemento del botón. En esta clase, definimos el ancho y la altura del botón primero. Luego, agregamos una propiedad que convierte el cursor en un puntero, y también le damos al texto un tamaño a. Luego, agregamos un método heredado llamado "desplazamiento" a la clase. En esta función, agregamos una imagen al fondo a través de URL y asignamos una propiedad al tamaño de fondo llamado "Cubierta".
Después de esto, cerramos todas las etiquetas de estilo y avanzamos hacia el cuerpo de este archivo. En la etiqueta del cuerpo, agregamos un encabezado usando la etiqueta H1 y la etiqueta del botón se abre después de la etiqueta de encabezado. En la etiqueta del botón, llamamos a la clase que creamos en la etiqueta de estilo del encabezado del archivo. Y luego, cierre el botón y la etiqueta del cuerpo. Después de esto, abrimos este archivo en nuestro navegador para obtener la siguiente salida:
La salida que vemos en este archivo es el resultado después de que el botón haya sido rondado. Cuando pasamos sobre el botón, aparece la imagen que asignamos en la etiqueta de estilo del encabezado del archivo.
Ejemplo 04: Transformación de la etiqueta de estilo CSS de un botón predeterminado a un icono para la siguiente y anterior función
En este ejemplo, transformaremos los dos botones predeterminados del lenguaje de marcado de hipertexto utilizando la etiqueta de estilo CSS. Transformaremos los dos botones en este ejemplo en los iconos anteriores y anteriores agregando una imagen en la etiqueta de estilo. Deberíamos escribir el siguiente script para hacerlo:
En el script anterior, agregamos una etiqueta de estilo en el encabezado del archivo. Luego, creamos dos clases para los dos botones en la etiqueta de estilo. En estas clases, agregamos una imagen a ambos botones respectivamente, utilizando la propiedad de imagen de fondo y el formato de URL para la imagen. Después de asignar ambas clases con sus propiedades, cerramos el estilo y la etiqueta de la cabeza y abrimos la etiqueta del cuerpo para crear el contenido para la página de nuestro navegador. Primero, le damos un rumbo al borde con la ayuda de la etiqueta H1, que es un tamaño de rumbo definido en HTML. Entonces, creamos dos botones. En ambos botones, asignamos la clase relativa definida en la etiqueta de estilo. Después de esto, cerramos las pestañas y abrimos este archivo en nuestro navegador después de guardarlo.
La salida anterior es el resultado de nuestro script. Como podemos ver, ambos botones están alineados y las imágenes de las clases de estilo se insertan correctamente. Ahora, los botones predeterminados se transforman en los iconos anteriores y anteriores para una página web utilizando CSS.
Conclusión
En este artículo, discutimos varios ejemplos de agregar las imágenes a un botón usando CSS. Utilizamos el CSS en línea y la etiqueta de estilo CSS para agregar las imágenes a un botón predeterminado en un archivo HTML. Implementamos varios efectos en un botón para agregar una imagen como el efecto de flujo o el fondo de estilo de cobertura utilizando el Notepad ++ para editar el archivo HTML. Utilizamos las diferentes propiedades en el estilo CSS del elemento de botón para transformarlas en un atributo atractivo en nuestra página web.