Login With Socials And Email
A centered login form with GitHub and Google buttons at top, and an animated email input that reveals on click. Features corner-expanding hover effects on the submit button.
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.
More from Login and Signup Sections
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessExplore more
About this block
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.