Login Form Cards

CSS Login form with password strength checker

[{"selector":"#anim-42b3941e-5568-4aaf-82e6-fa4d6c3c2d33","keyframes":{"opacity":[0,1]},"delay":250,"duration":1400,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1fbfb07e-933e-42ea-9a3b-2057c44d5235","keyframes":{"transform":["translate3d(99.51691%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":250,"duration":1400,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c79ada46-e5e0-429f-a4ed-263f1886381e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-87528c50-302d-40c3-86c0-702ce97b40d3","keyframes":{"transform":["rotate(-47deg) translate3d(0px, -73.07524%, 0) rotate(47deg)","rotate(-47deg) translate3d(0px, 0px, 0) rotate(47deg)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Learn more

Bootstrap 4 simple login form template

[{"selector":"#anim-3a209a9e-2b71-43b0-b49c-a58ad2a8d3eb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-84480b77-fc6b-405f-96e5-391fd51673a9","keyframes":{"transform":["translate3d(0px, 110.22458%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dc5d4a5d-d211-40f6-bf1f-5df17c7295c4","keyframes":{"transform":["rotate(-73deg) translate3d(-105.81395%, 0px, 0) rotate(73deg)","rotate(-73deg) translate3d(0px, 0px, 0) rotate(73deg)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a7921e65-e553-485e-9def-9bf846f22ca0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-590c3c40-5b61-462a-b022-61b48ba8c277","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] View More Learn more

Pure CSS login form with custom input style

[{"selector":"#anim-8ddbba47-839e-497c-bb98-e69d087a62c0","keyframes":{"opacity":[0,1]},"delay":250,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5c4a0784-9b0f-460b-9ade-d20c0d60cbb2","keyframes":{"transform":["translate3d(-115.65495%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":250,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9a0f7a4a-287d-424f-86cb-812b959583c6","keyframes":{"transform":["rotate(-354deg) translate3d(68.30189%, 0px, 0) rotate(354deg)","rotate(-354deg) translate3d(0px, 0px, 0) rotate(354deg)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3a5a6d52-5808-436a-94bc-6c3b9a5d74fb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b7c09d64-4827-48e3-a20a-8d09f271e136","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Learn more

Bootstrap 4 login form with image

[{"selector":"#anim-8e2998eb-4f58-4f69-a4ea-1e9a2a6fe55b","keyframes":{"transform":["translate3d(100.00000%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-22bf495a-509f-49f3-b37d-27052a475871","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-974440b3-32c5-4387-8273-5db00711c64f","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-43624947-7447-4438-8234-4dc2edf57da4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2d588b75-5784-4196-a599-20d39de4c4b8","keyframes":{"transform":["rotate(-329deg) translate3d(-53.76%, 0px, 0) rotate(329deg)","rotate(-329deg) translate3d(0px, 0px, 0) rotate(329deg)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Learn more

Bootstrap 4 Simple Login Page

[{"selector":"#anim-245ad732-34d3-4ea8-856e-d0d9a4510927","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-528d5426-0a13-4e1b-be39-235ea3256f6e","keyframes":{"transform":["translate3d(0px, 149.21613%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0b5173a2-72a1-4f82-8cba-f01c81a41fa1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0c78b0a1-bf53-4c5b-920e-6e458dae39b0","keyframes":{"transform":["rotate(-309deg) translate3d(-94.8949%, 0px, 0) rotate(309deg)","rotate(-309deg) translate3d(0px, 0px, 0) rotate(309deg)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-771d31aa-c56f-4a54-bfc3-524b9003b93b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bb65f35b-a55b-4f89-9418-d6fb9a815572","keyframes":{"transform":["translate3d(97.24773%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Burst with Arrow Learn more

Bootstrap 5 Login form black

[{"selector":"#anim-81795b26-2b7e-4df1-85f5-bc33549b09ff","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7e8def17-abeb-4a7b-b8f9-659510deda00","keyframes":{"transform":["translate3d(0px, 109.81088%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-72c4ab63-97fa-42df-89dc-579949e9dfb7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-340299c0-f049-4575-8674-52c19ee51ea1","keyframes":{"transform":["rotate(-212deg) translate3d(102.17917%, 0px, 0) rotate(212deg)","rotate(-212deg) translate3d(0px, 0px, 0) rotate(212deg)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Learn more

Login Form Cards With Free Source Code

[{"selector":"#anim-c489e629-efa3-42b2-9ab2-61b3ff49f734","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ac36a1c6-2fa5-4c3c-a9cc-d67111262d9b","keyframes":{"transform":["rotate(-311deg) translate3d(-80.62157%, 0px, 0) rotate(311deg)","rotate(-311deg) translate3d(0px, 0px, 0) rotate(311deg)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e6b2cb0d-f769-43bd-9c86-5f20b8edf7d0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] Thick Brush Stroke Learn more