60 forms de login HTML e CSS grátis

COMPARTILHE ESTE POST

Share on facebook
Share on telegram
Share on whatsapp
Share on twitter

Os formulários de Login ou de cadastro são partes fundamentais de um site. É através deles que os usuários efetuam login em uma área restrita ou ainda criam uma conta de acesso ao seu projeto. ter um login com um visual bonito, organizado, intuitivo com boa usabilidade fará que você possa além de oferecer um acesso agradável, flexível e intuitivo aos seus usuários, ainda te ajudará nas conversões de criação de novas contas.

E para ajudar você nesta missão, selecionamos 60 formulários de Login HTML e CSS Grátis para que você possa se inspirar ou até mesmo usar em seus projetos.

Vamos lá?

1. Creative Login Form

Formulário de login simples, mas criativo, criado usando HTML5 e CSS3. Este formulário de login também pode ser usado como formulário de registro. Este é o nosso modelo favorito nesta lista, graças à sua flexibilidade e semelhança que permite criar.

BAIXAR

2. Login Form Blue Magenta

formulário de login v1

Formulário de login simples, criativo e vibrante com um fundo gradiente. Você pode usar este para todos os tipos de objetivos, como aplicações web, móveis ou desktop. Mas seja criativo com isso, se quiser.

PRÉ-VISUALIZAR

DOWNLOAD

3. Login Form Clean New York

formulário de login v2
Formulário de login mínimo e sofisticado com um botão de gradiente com animação e um logotipo. Use-o, altere-o e tenha-o como uma boa adição ao seu projeto web já bacana.

PRÉ-VISUALIZAR

DOWNLOAD

4. Login Form Clean Creative

formulário de login v3
Uma página de login maravilhosa com uma imagem de fundo com sombra e uma caixa com gradiente e efeito de foco de botão de login. A única limitação que você tem é a sua imaginação, então expanda sua visão e use o Formulário de Login em todo o seu potencial.

PRÉ-VISUALIZAR

DOWNLOAD

5. Login Form Sky

formulário de login v4
Criatividade não conhece limites. Aqui está, à sua disposição, pronto e pronto para você fazer o download e colocá-lo em bom uso.

PRÉ-VISUALIZAR

DOWNLOAD

6. Login Form Tech

formulário de login v5
Formulário de login lindo, limpo e moderno, com uma opção para fazer login com o Facebook ou o Google. Todos os botões têm um bom efeito que estimula a experiência.

PRÉ-VISUALIZAR

DOWNLOAD

7. Login Form Simple And Clean

formulário de login v6
Se sua página já está super arrumada, um formulário de login não deve ser diferente. Aqui está um que irá facilmente atender às suas expectativas se o minimalismo for seu objetivo.

PRÉ-VISUALIZAR

DOWNLOAD

Login Form Grey

formulário de login v7
Um formulário com opção tripla para fazer login na conta. Login com Facebook, Twitter ou e-Mail. Esse é o tipo de ferramenta que você precisa incluir na sua página. E se eles ainda não tiverem uma conta, você também poderá vinculá-la à sua página de inscrição.

PRÉ-VISUALIZAR

DOWNLOAD

8. Login Form Green Clean

formulário de login v8
Outro formulário de login contemporâneo, moderno e atraente, com tudo arredondado. Este é especialmente aplicável para usuários móveis devido ao seu estilo de cantos arredondados atualmente muito popular.

PRÉ-VISUALIZAR

DOWNLOAD

9. Login Form Flower

formulário de login v9
Se você quiser evitar o fundo branco ou de uma só cor, essa é a página do formulário de login que você deve considerar. Ele não apenas suporta um fundo de imagem completo, mas também vem com uma sobreposição de gradiente e uma opção para fazer login com o Facebook ou o Google.

PRÉ-VISUALIZAR

DOWNLOAD

10. Login Form White

formulário de login v10
Este formulário de login é mais completo em relação ao anterior. Bastante minimalista e ainda tem essa sensação leve e clean.

PRÉ-VISUALIZAR

DOWNLOAD

11. Login Form Pink and Blue

formulário de login v11
Com nossa coleção dos melhores formulários de login HTML5 e CSS3, você economiza tempo e esforço (dinheiro também). Em vez de construir um a partir do zero, aqui está outro modelo pronto para uso para você empregar.

PRÉ-VISUALIZAR

DOWNLOAD

13. Login Form Ocean City

formulário de login v12
Fundo de imagem com uma sobreposição de sombra azul, nome, imagem e o formulário obrigatório. Também há um efeito de foco no botão de login e dá a chance de vinculá-lo ao seu formulário de registro.

PRÉ-VISUALIZAR

DOWNLOAD

14. Login Form New

formulário de login v13
Um formulário de inscrição de tela dividida, em que uma metade é dedicada a uma imagem e a outra metade ao formulário. Mais uma opção gratuita que você pode começar a usar neste exato momento. Basta baixar o layout e ir com tudo.

PRÉ-VISUALIZAR

DOWNLOAD

15. Login Form Master Clean

formulário de login v14
Neste formulário de login, temos uma mistura de formas de login simplistas e um pouco mais complexas e avançadas. Em suma, bom para todos os gostos e ainda muito minimalista. Mas por que complicar ainda mais com um formulário de login, certo?

PRÉ-VISUALIZAR

DOWNLOAD

16. Login Form Pexels

formulário de login v15
Apesar de ainda manter as a pegada minimalista, uma adição legal é o banner de imagem logo acima do formulário. Com esse pequeno recurso, você pode tornar a experiência um pouco mais envolvente.

PRÉ-VISUALIZAR

DOWNLOAD

17. Login Form Natural

formulário de login v16
Este é um formulário de login com uma imagem em tela cheia em cima da qual é colocado um formulário com campos de nome de usuário e senha e um botão de gradiente com efeito de foco. Simples e direto.

PRÉ-VISUALIZAR

DOWNLOAD

18. Login Form Side

formulário de login v17
Para parecer mais pessoal, esse modelo de formulário de login é o mais adequado para você. Tem um lado de imagem e um lado do formulário, mas mantém a pegada minimalista, garantindo o profissionalismo.

PRÉ-VISUALIZAR

DOWNLOAD

19. Login Form Slider

formulário de login v18
Se você gosta de se diferenciar e manter as coisas originais, considere o uso deste formulário. Enquanto alguns gostam de páginas de login super básicas, os outros querem ter alguns extras adicionais balanceando o layout. E se adicionar você procura um formulário de login com image, este é indicado para você.

PRÉ-VISUALIZAR

DOWNLOAD

20. Login Form Small

formulário de login v19
Vibrante, enérgico e chamativo, é isso que este formulário de login baseado em HTML5 e CSS3 passa ao usuário. Também é totalmente responsivo e pronto para dispositivos móveis, além de ser compatível com todos os principais navegadores da web.

PRÉ-VISUALIZAR

DOWNLOAD

21. Login Form Best Look

formulário de login v20
Fundo de gradiente, botão de login preto com efeito hover, nome de usuário e senha junto com texto personalizado e seção “Esqueceu a senha?”

PRÉ-VISUALIZAR

DOWNLOAD

22. Floating Sign Up Form

formulário de login dropdown

O formulário está oculto, a menos que você clique na opção “Login”. Realmente é um ótimo recurso para sites modernos que querem evitar ter uma página separada para o formulário de login. Você pode exibir o formulário em qualquer lugar do seu site com essa ferramenta poderosa. Otimização e minimalismo.

BAIXAR

23. Floating Sign Up Form

forma de inscrição flutuante

Um design para um formulário de login e inscrição usando guias e rótulos de formulários flutuantes.

BAIXAR

24. Simple Login Form

formulário de login simples

O que foi inicialmente feito para impedir as pessoas de entrarem no site WordPress, tornou-se uma forma muito popular devido à sua simplicidade e design elegante.

BAIXAR

25. Flat Login – Sign Up Form

login flutuante inscreva-se

Depois de clicar no botão “Clique-me” no canto superior direito, você terá uma animação suave que transforma este formulário de Login em Formulário de inscrição.

BAIXAR

26. Login With Self-Contained SCSS Form

faça o login com o formulário scss independente

Este é um formulário com SCSS independente. Uma extensão de CSS que adiciona poder e elegância à linguagem básica. Ele permite usar variáveis, regras aninhadas, mixins, importações sequenciais e muito mais.

BAIXAR

27. Animated Login Form

formulário de login animado

Este é realmente um formulário de login animado, com o topo “Ei você, Login já” transformando-se na forma de formulário na parte inferior.Possui efeitos de animação suaves.

BAIXAR

28. Login Form Using CSS3 And HTML5

Formulário de login usando css3 e html5

Este é um exemplo de como criar um formulário de login simples usando HTML5 e CSS3. Este formulário usa pseudo-elementos (: after e: before) para criar o efeito de várias páginas. Esses elementos são “rotacionados” usando a propriedade de transformação CSS3. Este formulário usa HTML5 para facilitar a validação e a submissão.

BAIXAR

29. Login With Shake Effect

faça o login com efeito shake

Depois de inserir uma senha incorreta neste formulário, um efeito de tremido bem legal avisará que você não digitou a senha correta. Uma solução simples e eficaz que apontará o problema de senhas incorretas.

BAIXAR

30. Boxy Login Form

formulário de login boxy

Um formulário de login box com uma pequena surpresa. Tente “admin” como um nome de usuário e “1234” como uma senha, para uma experiência completa.

BAIXAR

31. Animated Login Form

formulário de login animado

Formulário de login otimizado. Depois de clicar em “LOGIN” no lado esquerdo, o efeito de animação cria um pequeno formulário de login à direita.

BAIXAR

32. Material Design Form

formulário de login de design de material

Simples, minimalista e com bons acabamentos e detalhes. Este formulário de login se adequa a diversos projetos.

BAIXAR

33. Bootstrap Snippet Form

formulário de login de trecho de bootstrap

Outra opção simples de formulário de Login para quem quer minimalismo e simplicidade.

BAIXAR

34. Login With Flat UI

faça o login com ui plana

Simples, pequeno, mas bem direto ao ponto. Este formulário é bem simples, mas o ajudará em seus projetos web.

BAIXAR

35. Trendy UI Kits Form

formulário de login de kits de interface da moda

BAIXAR

36. Dashboard CSS3 HTML5 Form

formulário de login do painel de controle css3 html5

BAIXAR

37. Login With Recovery Form

formulário de login com recuperação

BAIXAR

38. Flat Login Form

formulário de login simples

BAIXAR

39. Transparent Login

formulário de login transparente

BAIXAR

40. Login With Google Chrome Extension

faça o login com a extensão google chrome

BAIXAR

41. Elegant Flat Form

formulário de login plano elegante

BAIXAR

42. Stylized Login Form

formulário de login estilizado

BAIXAR

43. Login With Social Integration

faça o login com integração social

BAIXAR

44. Show And Hide Password Form Example

mostre e oculte o exemplo do formulário da senha

BAIXAR

45. Log ‘N Load Animated Form

log-n carrega formulário de login animado

BAIXAR

46. Flat Modern Login Form

formulário de login moderno apartamento

BAIXAR

47. My Login Form

meu formulário de login

BAIXAR

48. Simple Form For Inspiration

Formulário de login simples para inspiração

BAIXAR

49. CSS3 Form With Logo

formulário css3 com logotipo

BAIXAR

50. CSS3 Form With Shadow

Formulário de login css3 com sombra

BAIXAR

51. Flat UI Form V2

forma plana ui v2

BAIXAR

51. Simple Login Widget

Widget de login simples

BAIXAR

53. Fancy Login Form

formulário de login extravagante

BAIXAR

54. Green And Yellow Form

formulário de login verde e amarelo

BAIXAR

55. Simple Form With Spinning Loader

forma simples com carregador giratório

BAIXAR

56. Password Protected Form

formulário de login protegido por senha

BAIXAR

57. Paper Login CSS3 Form

Formulário css3 de login em papel

BAIXAR

58. Transparent Form With Logo

forma transparente com logotipo

BAIXAR

60. Modern Login Form

formulário de login moderno

BAIXAR


Post traduzido pelo Eadfox e originalmente disponível aqui.

Share on facebook
Share on telegram
Share on whatsapp
Share on twitter
JUNTE-SE A MAIS DE 5.000 PROFISSIONAIS

Receba periodicamente em seu e-mail conteúdos sobre WordPress, Design, Marketing Digital e Negócios. 

Felipe Cardozo

Felipe Cardozo

Fundador do MX e desenvolveu diversos cursos para o portal. Além disso, também é publicitário e criador do MX Masters e Video Aulas Brasil, ama tecnologia e como filho de pais professores, não poderia deixar de ser e compartilhar imediatamente tudo que aprende!

O QUE VOCÊ PROCURA?

Digite no formulário o que deseja encontrar

  • ROLE PARA BAIXO PARA LER TODO CONTEÚDO
Curso Gratuito de WordPress
Inscreva-se gratuitamente em nosso Curso Gratuito de WordPress e inicie agora seus estudos online.