Insertar imagen en un botón en HTML
-
Utilice la etiqueta
<img>dentro de la etiqueta<button>para incrustar la imagen en el botón HTML -
Utilice la etiqueta
<input type="image">para incrustar una imagen en el botón HTML
Este artículo discutirá varios métodos para incrustar una imagen en un elemento <button> en HTML. Significa arreglar o configurar una imagen dentro del botón HTML.
Utilice la etiqueta <img> dentro de la etiqueta <button> para incrustar la imagen en el botón HTML
Esta etiqueta <img> se utiliza para incrustar una imagen en una página HTML. Las imágenes no se colocan literalmente en la página web; las imágenes están vinculadas a las páginas web por vías determinadas. Esta etiqueta genera un espacio para la imagen en particular. La etiqueta tiene dos atributos obligatorios, a saber, src y alt. Podemos crear un botón HTML en el que se puede hacer clic usando la etiqueta <button> en HTML. Al colocar la etiqueta <img> dentro de la etiqueta <button> se crea un botón HTML en el que se puede hacer clic con una imagen incrustada en él.
Por ejemplo, dentro del cuerpo HTML, abra la etiqueta <button>. Especifique type como button. Luego, abra la etiqueta <img> y especifique la URL de la imagen en el atributo src. A continuación, establezca height y width en 80 y 100 respectivamente. Finalmente, cierre todas las etiquetas abiertas anteriormente en las siguientes líneas.
En el siguiente ejemplo, creamos un elemento <button> e insertamos una imagen dentro de él para incrustarla dentro del botón. Usamos un acortador de URL para colocar la URL corta de la imagen en la etiqueta src. Por lo tanto, se puede crear un botón con una imagen en HTML.
Código de ejemplo:
<body>
<button type="button"> <img src="/img/DelftStack/logo.png" height ="90" width="480" /></button>
</body>
Utilice la etiqueta <input type="image"> para incrustar una imagen en el botón HTML
La etiqueta <input> especifica un campo de entrada donde podemos ingresar nuestros datos. Hay muchos tipos de entrada y widgets de control permitidos en HTML. Algunos de ellos son <input type="button">, <input type="color">, <input type="email">, <input type="text">. Podemos establecer el atributo type en image y establecer el src para incrustar una imagen en el tipo de entrada. Funcionará como un botón.
Por ejemplo, dentro del cuerpo HTML, abra la etiqueta <input> y especifique type a image. Luego, escriba la URL de la imagen en el atributo src. A continuación, escriba el atributo style y establezca el border en double. Además, agregue la height y el width como 80 y 170. Luego, cierre la etiqueta de entrada y todas las etiquetas abiertas anteriormente.
El siguiente ejemplo ilustra un método para incrustar una imagen en una página HTML. La etiqueta <type="image"> especifica que estamos insertando o usando una imagen en nuestro trabajo. Hemos utilizado el CSS en línea para establecer el borde, la height y el width de la imagen. Hicimos esto para que la imagen se pareciera más a un botón. El valor double especifica que se utiliza un borde doble fuera del botón de imagen. La altura y el ancho ayudan a que la imagen adquiera un tamaño definido. Si no especificamos la altura y el ancho de una imagen, la página puede parpadear cuando se carga la imagen. De esta forma, podemos incrustar una imagen en un botón HTML.
Código de ejemplo:
<input type="image" src="/img/DelftStack/logo.png" style="border: double;" height="90" width="480"/>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn