Bubble.io Mini Course - [PART 3] Stripe Style Login
🎨 Want cleaner UI and better design in Bubble?
Bubble Design Lab gives you access to real projects, design walkthroughs, and direct feedback from Nick. Join now for just $39/month:
👉 https://www.skool.com/bubble-io/about
Build a Stripe-Style Login Page in Bubble – Part 3
In this video, we bring your login form to life with fully interactive elements and polished styling. You’ll implement a toggleable "Remember Me" feature using custom states, add styled sign-in buttons (including Google and SSO), build an "OR" divider, and structure the main login group with responsive layout and shadows.
👨🎨 Learn how to:
Add custom states to power the “Remember Me” toggle
Style interactive checkboxes using conditional logic
Design and layout alternative sign-in buttons (Google, Code, SSO)
Build a clean visual divider using shape and text
Style your login group with shadows, spacing, and polished visuals
Add a “Join now” CTA and “Forgot your password?” link
Key moments:
00:00 – Intro and community invite to Bubble Design Lab
01:25 – Setting a custom state for "Remember Me"
02:25 – Conditional styling for checkbox icon
03:40 – Toggle state workflows using "Only when"
05:40 – Why you must set default values for states
06:16 – Adding and styling the “Sign In” button
07:33 – Creating alternative login buttons (Google, Code, SSO)
09:51 – Building an “OR” divider with shapes and text
12:13 – Aligning and spacing the OR group elements
13:02 – Creating and styling the “Join Now” button (create account CTA)
15:46 – Grouping login form elements into one container
17:22 – Styling the login group with shadow and roundness
18:38 – Creating and positioning the “Forgot your password?” link
19:23 – Final touches and preview