Login With Socials And Email
The form centers vertically and horizontally on the page. At the top sit GitHub and Google login buttons side by side with icon and text labels. A horizontal divider separates social options from the email section.
Clicking "Continue with Email" reveals an email input field using Framer Motion height and opacity animation. The button transforms from showing the email option to submitting the form once the input is visible.
The submit button has a distinctive hover effect where corner borders expand outward. Four absolute-positioned border elements animate from small squares to larger L-shaped corners using CSS transitions and group-hover states.
An ambient color gradient sits behind the form, adding subtle visual depth. Works well for developer tools, modern SaaS products, or any app wanting a clean, progressive disclosure login experience.
Explore more
Part of Login and Signup Sections ยท All blocks
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
100+ templates and blocks combined
Ready to copy paste component blocks, save days of development time



