→ Anonymous
→ Sign in form with continue with google b...

Sign in form with continue with google button

This Example is contributed by Anonymous, on 07-Mar-2025. It is responsive. similar terms for this example are Form Component,Login,Register,Sign in

Form Login Form Authentication Signup

Author Anonymous

Fork Fullscreen

<div class="sign-in-container">
  <div class="form-box">
    <div class="header">
      <h2>Sign In</h2>
      <p>Welcome back! Please enter your details</p>
    </div>
    
    <form id="sign-in-form">
      <div class="input-group">
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Enter your email" required>
        <span class="error-message" id="email-error"></span>
      </div>
      
      <div class="input-group">
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Enter your password" required>
        <span class="error-message" id="password-error"></span>
      </div>
      
      <div class="options">
        <div class="remember-me">
          <input type="checkbox" id="remember" name="remember">
          <label for="remember">Remember me</label>
        </div>
        <a href="#" class="forgot-password">Forgot password?</a>
      </div>
      
      <button type="submit" class="sign-in-btn">Sign In</button>
      
      <div class="divider">
        <span>or</span>
      </div>
      
      <button type="button" class="google-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 186.69 190.5">
          <path fill="#4285f4" d="M95.25 77.932v36.888h51.262c-2.251 11.863-9.006 21.908-19.137 28.662l30.913 23.986c18.011-16.625 28.402-41.044 28.402-70.052 0-6.754-.606-13.249-1.732-19.483z"/>
          <path fill="#34a853" d="M41.869 113.38l-6.972 5.337-24.679 19.223c15.673 31.086 47.796 52.561 85.03 52.561 25.717 0 47.278-8.486 63.038-23.033l-30.913-23.986c-8.486 5.715-19.31 9.179-32.125 9.179-24.765 0-45.806-16.712-53.34-39.226z"/>
          <path fill="#fbbc05" d="M41.869 76.93c-3.262 9.62-5.09 19.956-5.09 30.715 0 11.246 2.049 22.049 5.752 32.249l31.651-24.56c-1.686-5.1-2.639-10.574-2.639-16.271 0-4.216.72-8.258 2.027-12.015z"/>
          <path fill="#ea4335" d="M95.25 40.404c13.727 0 25.972 4.726 35.617 14.024l27.276-26.983C143.005 13.592 121.665 4 95.25 4 58.016 4 25.891 25.475 10.218 56.562l31.651 24.56c7.533-22.514 28.575-39.226 53.34-39.226z"/>
        </svg>
        Sign in with Google
      </button>
      
      <p class="signup-link">Don't have an account? <a href="#">Sign up</a></p>
    </form>
  </div>
</div>

Related Examples

Login Form

Author:
Anonymous

6 months ago
Login form with CSS

Author:
Anonymous

6 months ago
User Authentication Login Card
A clean and modern login card with username and password fields, remember me option, and social media login alternatives.

Author:
Alex Morgan

7 months ago
Modern Login Page with Social Authentication Buttons
A sleek and secure login page featuring single sign-on (SSO) options with Google and GitHub, enhancing user experience and security.

Author:
Alisha Patel

8 months ago
Basic Login Form

Author:
Anonymous

8 months ago
User Login Form

Author:
Laura Mitchell

8 months ago
Continue with google button design
A professionally styled Google authentication button with the Google logo for seamless integration into any web application's login/signup flow.

Author:
Cleo Claren

7 months ago
Google Login Button Example

Author:
Anonymous

5 months ago
Elegant Newsletter Signup Form

Author:
Anonymous

8 months ago
Clean Modern Sign Up Form with Toggle
A clean, responsive sign up and login form with a simple toggle to switch between authentication modes. Perfect for websites and web applications.

Author:
Sammy Rodriguez

7 months ago
Animated Login Form with Visual Effects

Author:
Anonymous

8 months ago
Password Reset Request Form
A clean and responsive forgot password form that allows users to request a password reset link via email, featuring input validation and success feedback.

Author:
Anonymous

7 months ago

Didn't find component you were looking for?

Search from 500+ components