Social Login Buttons Template

Streamline your user sign-up process with this set of familiar and trusted social login buttons.

By allowing users to log in with an existing account, you can reduce registration friction and increase conversion rates.

Get Source Code Preview

About Social Login Buttons

Social login buttons are a common feature in modern web applications. They offer a one-click method for authentication, which is often faster and easier than filling out a traditional registration form. This template provides a set of buttons styled to meet the visual identity guidelines of major providers like Google, Apple, and Facebook, which helps to build user trust.

Features

Brand-Compliant Design: Buttons are styled using the official colors, fonts, and logos as specified by each provider's guidelines.
Inline SVG Icons: Includes high-quality, embedded SVG logos for each service, eliminating the need for external assets.
Responsive and Flexible: The button container uses Flexbox with a vertical layout, which is ideal for login or sign-up forms. The buttons are full-width for a clean appearance.
Accessible: The button text (e.g., "Sign in with Google") clearly communicates the action, and the decorative icons are hidden from screen readers using aria-hidden="true" to prevent redundancy.

Code Breakdown

This component is structured as a div container with several button elements inside. The container uses display: flex and flex-direction: column to stack the buttons vertically, with the gap property providing consistent spacing. Each button is also a flex container to precisely align its logo and text. The CSS is well-organized, with a base class for common styles and modifier classes (e.g., .google, .apple) for brand-specific styling.

Code

Here is the complete code for the social login buttons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Login Buttons</title>
    <style>
        /*
         Component: Social Login Buttons
         Description: A set of buttons for third-party authentication.
        */

.social-login-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 320px;
            margin: 2rem auto;
            padding: 2rem;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

.social-login-btn-1 {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            width: 100%;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            font-weight: 500;
            border: 1px solid transparent;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }

.social-login-btn-1 svg {
            width: 18px;
            height: 18px;
        }
        
        .social-login-btn-1:focus-visible {
            outline: 3px solid #007bff;
            outline-offset: 2px;
        }

/* --- Google Button --- */
        .social-login-btn-1.google {
            background-color: #ffffff;
            color: #4A4A4A;
            border-color: #E0E0E0;
        }
        .social-login-btn-1.google:hover {
            background-color: #f7f7f7;
        }

/* --- Apple Button --- */
        .social-login-btn-1.apple {
            background-color: #000000;
            color: #ffffff;
        }
        .social-login-btn-1.apple:hover {
            background-color: #333333;
        }

/* --- Facebook Button --- */
        .social-login-btn-1.facebook {
            background-color: #1877F2;
            color: #ffffff;
        }
        .social-login-btn-1.facebook:hover {
            background-color: #166FE5;
        }
        .social-login-btn-1.facebook svg {
            fill: currentColor;
        }

</style>
</head>
<body>

<div class="social-login-container-1">
        <button type="button" class="social-login-btn-1 google">
            
            <svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg>
            <span>Sign in with Google</span>
        </button>
        <button type="button" class="social-login-btn-1 apple">
            
            <svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24"><path d="M20.72,13.59c-0.21-2.22,1.38-4,1.44-4.06c-1.3-1.84-3.32-2-3.93-2.06c-1.63-0.18-3.26,0.96-4.12,0.96 c-0.85,0-2.09-0.87-3.46-0.84c-1.94,0.06-3.66,1.06-4.6,2.69c-1.85,3.22-0.58,7.99,1.26,10.63c0.91,1.32,2.02,2.78,3.43,2.72 c1.36-0.06,1.86-0.87,3.56-0.87c1.69,0,2.1,0.87,3.58,0.81c1.55-0.06,2.44-1.29,3.31-2.63c0.95-1.47,1.42-2.92,1.48-2.98 c-0.06,0-2.86-1.12-2.88-4.32C20.67,13.62,20.7,13.59,20.72,13.59z M16.63,6.34c0.69-0.86,1.15-1.9,1.06-3.01 c-1.06,0.06-2.19,0.67-2.9,1.52C14.12,5.55,13.62,6.6,13.71,7.67C14.79,7.74,15.93,7.2,16.63,6.34z" fill="currentColor"/></svg>
            <span>Continue with Apple</span>
        </button>
        <button type="button" class="social-login-btn-1 facebook">
            
            <svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5V12h3.642L18 8h-4V6.333c0-.953.375-1.333 1.118-1.333h2.882V1H16c-3.86 0-5 2.222-5 5v2z"/></svg>
            <span>Continue with Facebook</span>
        </button>
    </div>

</body>
</html>

View Output