Incorporar imagem em um botão em HTML
-
Use a tag
<img>dentro da tag<button>para incorporar a imagem no botão HTML -
Use a tag
<input type="image">para incorporar uma imagem no botão HTML
Este artigo discutirá vários métodos para incorporar uma imagem em um elemento <button> em HTML. Significa corrigir ou definir uma imagem dentro do botão HTML.
Use a tag <img> dentro da tag <button> para incorporar a imagem no botão HTML
Esta tag <img> é usada para embutir uma imagem em uma página HTML. As imagens não são colocadas literalmente na página da web; as imagens são vinculadas às páginas da web por meio de determinados caminhos. Esta tag gera um espaço para a imagem particular. A tag tem dois atributos obrigatórios, a saber src e alt. Podemos criar um botão HTML clicável usando a tag <button> em HTML. Colocar a tag <img> dentro da tag <button> cria um botão HTML clicável com uma imagem embutida nele.
Por exemplo, dentro do corpo do HTML, abra a tag <button>. Especifique tipo como botão. Em seguida, abra a tag <img> e especifique o URL da imagem no atributo src. Em seguida, defina height e width para 80 e 100 respectivamente. Por fim, feche todas as tags abertas anteriormente nas linhas a seguir.
No exemplo abaixo, criamos um elemento <button> e inserimos uma imagem dentro dele para ser embutida dentro do botão. Usamos um encurtador de URL para colocar o URL curto da imagem na tag src. Assim, um botão com uma imagem pode ser criado em HTML.
Código de exemplo:
<body>
<button type="button"> <img src="/img/DelftStack/logo.png" height ="90" width="480" /></button>
</body>
Use a tag <input type="image"> para incorporar uma imagem no botão HTML
A tag <input> especifica um campo de entrada onde podemos inserir nossos dados. Existem muitos tipos de entrada e widgets de controle permitidos em HTML. Alguns deles são <input type="button">, <input type="color">, <input type="email">, <input type="text">. Podemos definir o atributo type para image e definir o src para incorporar uma imagem no tipo de entrada. Ele funcionará como um botão.
Por exemplo, dentro do corpo do HTML, abra a tag <input> e especifique type para image. Em seguida, digite o URL da imagem no atributo src. Em seguida, escreva o atributo style e defina a border como double. Além disso, adicione height e width como 80 e 170. Em seguida, feche a tag de entrada e todas as tags abertas anteriormente.
O exemplo abaixo ilustra um método para incorporar uma imagem em uma página HTML. A tag <type="image"> especifica que estamos inserindo ou usando uma imagem em nosso trabalho. Usamos o CSS inline para definir a border, height e width da imagem. Fizemos isso para deixar a imagem mais parecida com um botão. O valor double especifica que uma borda dupla é usada fora do botão da imagem. A altura e a largura ajudam a imagem a ter um tamanho definido. Se não especificarmos a altura e a largura de uma imagem, a página pode piscar quando a imagem for carregada. Desta forma, podemos inserir uma imagem em um botão HTML.
Código de exemplo:
<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