Botão fixo para abrir um formulário

[rafinha_sam 2]

Como faço um botão na parte inferior fixo para abrir um formulário, como se fosse uma seta pra cima quando o usuario clicar abre a janela na mesma aba so sobe um formulário.

Pode ser também só o botão fixo não tem problema eu faço abrir em outra tela !!

[L. Henrique 179]

Rafinha,

Como sua pergunta foi: "como faço..." - então vou te ensinar a construir esse botão e não vou te passar código algum para copiar e colar.

Sobre o botão (disposição layout):

• Você vai precisar abrir a sua tag button no seu HTML (em qualquer parte).
• Vai precisar atribuir uma classe X a ela pra poder tratar no CSS.
• Agora que já atrelou uma classe a essa tag button, você vai precisar estilizar via CSS - e dentro do CSS você vai precisar de position, right e bottom.
  - Position: Vai definir qual será a posição do seu botão, existem alguns como absolute, fixed, relative, inherit... Bem, como você quer um botão fixo, então está meio óbvio.
  - Right: Alinha um elemento de acordo com o lado direito da tela. Então se você quer que esse elemento esteja grudado no lado direito, o valor de right deve ser 0.
  - Bottom: Mesma coisa do right.
• Feito tudo isso, seu botão já estará fixo e alinhado a alguma parte de seu site.

 

Quanto ao "clicar e abrir a janela"... Isso é JavaScript e creio que vai precisar começar estudar se ainda não aprendeu.

 

Vamos explicar como você pode estruturar:

• Você vai precisar estruturar o seu bloco que ira surgir. Pra isso, use HTML e CSS. Adicione a propriedade display: none; a essa caixa, por exemplo.
• No JS você vai precisar de um evento OnClick, que será o responsável por executar uma ação ao clicar no botão.
• Referencie o evento ao botão através de uma ID ou classe e então adicione a função CSS para o elemento do formulário. Exemplo: document.getElementById('formulario').style.display = "block";

 

Boa sorte e bons estudos.

Abraços!

[rafinha_sam 2]

Obrigadão eu consegui aqui man ! .

[codercss 14]

Olá, Obrigado pela explicação :)

 

Penso que era isto o pretendido https://jsfiddle.net/v32u298u/2/

Adicionei o efeito do hover. Agora é so criar um model e colocar lá dentro o teu form :)

 

Obrigado e bons códigos