O botões de imagem no documento HTML pode ser criado usando o tipo atributo de um elemento. Os botões de imagem também desempenham a mesma função dos botões de envio, mas a única diferença entre eles é que você pode manter a imagem de sua escolha como um botão.

Sintaxe

Exemplos

Exemplo 1: Este exemplo é usado para especificar o botão de imagem sem usar CSS.

 Example of image button /* The following tag selector body use the font-family and background-color properties for body of a page*/ Body { font-family: Calibri, Helvetica, sans-serif; background-color: pink; } /* Following container class used padding for generate space around it, and also use a background-color for specifying the lightblue color as a background */ .container { padding: 50px; background-color: lightblue; } /* The following tag selector input uses the different properties for specifying the text field. */ input[type=text] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; } input[type=text]:focus { background-color: orange; outline: none; } div { padding: 10px 0; } hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } <hr> Firstname: Middlename: Lastname: Course : Course BCA BBA B.Tech MBA MCA M.Tech Gender : <br> Male Female Other  

Saída:

Suporte ao navegador

Elemento	cromada	Ou seja	Raposa de fogo	Ópera	Safári
Botão de imagem	Sim	Sim	Sim	Sim	Sim

Atributos

Tudo:

Este atributo é utilizado para especificar o texto alternativo, que deverá ser exibido quando a imagem não puder ser exibida na tela do usuário.

Fronteira:

Este atributo é usado para especificar a borda da imagem. Se você colocar seu valor como 0, nenhuma borda será exibida.

Altura:

Este atributo é usado para definir os pixels da altura de uma imagem.

Nome:

Este atributo é usado para definir o nome de uma imagem.

Fonte:

Este atributo é usado para especificar o caminho da imagem que precisa aparecer como um botão.

Largura:

Este atributo é usado para definir os pixels da largura de uma imagem.