How to change width of the new Google Sign In Button

Viewed 140

I have migrated from the old "Sign In With Google" to the new one. https://developers.google.com/identity/gsi/web/guides/display-button#html

I chose to use the JavaScript approach, so this is the code I used.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <script>
        function handleCredentialResponse(response) {
          console.log("Encoded JWT ID token: " + response.credential);
        }
        window.onload = function () {
          google.accounts.id.initialize({
            client_id: "YOUR_GOOGLE_CLIENT_ID",
            callback: handleCredentialResponse
          });
          google.accounts.id.renderButton(
            document.getElementById("buttonDiv"),
            { theme: "outline", size: "large" }  // customization attributes
          );
          google.accounts.id.prompt(); // also display the One Tap dialog
        }
    </script>
    <div id="buttonDiv"></div> 
  </body>
</html>

With this code, I was able to render the sign in button. However, the problem is that the width of the button is fixed and it cannot be changed.

How can I change the width of the button? Or, is there any way I can make the button by myself and assign only the login function to it?

0 Answers
Related