HOWTO · HTML
Incorporar imagem em um botão em HTML
Este tutorial apresenta como incorporar uma imagem em um botão HTML
Nesta página
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"/>
