Building a custom Google Sign-In button

AI-generated Key Takeaways

Support for the Google Sign-In library is deprecated, and users should refer to the deprecation guide.
You can customize the automatically rendered Google Sign-In button by adding a container element, calling signin2.render() with options, and including the platform.js script with an onload function.
Alternatively, you can specify custom settings for a Google Sign-In button using data- attributes on a div element with the class g-signin2.
For a fully custom button graphic that fits your site's design, you must adhere to Google's branding guidelines for colors and icons and ensure the button is prominent.

Customizing the automatically rendered sign-in button (recommended)

To create a Google Sign-In button with custom settings, add an element to contain the sign-in button to your sign-in page, write a function that calls signin2.render() with your style and scope settings, and include the https://apis.google.com/js/platform.js script with the query string onload=YOUR_RENDER_FUNCTION.

The following is an example of a Google Sign-In button that specifies custom style parameters:

The following HTML, JavaScript, and CSS code produces the button above:

<html>
<head>
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
  <div id="my-signin2"></div>
  <script>
    function onSuccess(googleUser) {
      console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
    }
    function onFailure(error) {
      console.log(error);
    }
    function renderButton() {
      gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
      });
    }
  </script>

  <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</body>
</html>

You can also specify settings for a custom Google Sign-In button by defining data- attributes to a div element with the class g-signin2. For example:

<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">

Building a button with a custom graphic

You can build a Google Sign-In button to fit your site's design. You must follow the branding guidelines and use the appropriate colors and icons in your button. The branding guidelines also provide icon assets that you can use to design your button. You must also ensure that your button is as prominent as other third-party login options.

The following is an example of a Google Sign-In button built with a custom graphic: