Botão Enviar, como colocar na página no lugar desejado-Botão-Enviar-Page-500x204

Botão Enviar, como colocar na página no lugar desejado

Colocar um botão em qualquer lugar da página é possível e também muito simples

Primeiro, escolha o “ponto” ideal para o botão. Isto feito, verifique a linha onde ele vai ser colocado. Divida a linha em duas partes (colunas).
Se deseja o botão na direita, reserve o espaço adequado (largura da coluna) para o tamanho do botão com alguma folga. Na outra coluna é interessante colocar um texto, como o título da página de destino.

Botão Enviar, como colocar na página no lugar desejado-Botão-Enviar-Page-500x204

O Código


CSS:
<style>
    input#cenviar{
        padding-left: 5px;
        padding-top: -10px;
}
    div#esquerda{
        width:85%;
        float:left;
}
    div#direita{
        width:15%;
        float:right;
}
</style>

HTML:
<div id="esquerda">
    <h4>Título</h4><br>
</div>

<div id="direita">
    <a href="urldestino" target="_blank" rel="noopener noreferrer"><input type="image" name="tenviar" id="cenviar" src="urlimagem" /></a>
</div>

Caso deseje colocar o botão em outro lugar vá à seção CSS e altere o código. Por exemplo: se quiser à esquerda, ajuste a largura da coluna para 15% ou 20%, conforme o tamanho do botão e, na coluna da direita, coloque o valor restante. Obs.: mesmo que não tenha intenção de colocar (preencher) com texto ou objeto na coluna restante, o valor tem que ser declarado.

Botão Enviar no fim da página

Por padrão os botões “enviar” são colocados no fim da página.

Há duas maneiras de fazer isso:
1ª) Declare a posição do botão diretamente no código da imagem. Exemplo:


 <a href="urldestino" target="_blank" rel="noopener noreferrer"><img class="aligncenter" src="urlimagem" alt="" /></a>

2ª) A segunda maneira, mais completa e, na minha opinião, a melhor, permite todo tipo de ajuste. Veja exemplo:


CSS:
<style>
    input#cenviar{
        margin: 10px auto 5px auto; // ajusta a imagem no centro
        margin-left: 10px; // ajusta a imagem à esquerda.
        margin-right: 10px; // ajusta a imagem à direita.
</style>
}

Vamos imaginar que você quer colocar o botão no fim da página, à direita, duas linhas abaixo do texto. Simplificando, ficaria assim:


CSS:
<style>
    input#cenviar{
        margin: 40px 20px 10px auto;
</style>
}

Sendo 40px a distância vertical superior em relação ao texto ou objeto acima, 20px é a margem à direita, 10px a margem inferior e "auto" para que a margem esquerda seja igual a todo o espaço disponível.

A vantagem deste método é que você pode ajustar alterando apenas os valores declarados até que o botão esteja exatamente onde você quer. O código HTML não precisa ser alterado.