Create Apple And Google Sign-In Buttons - Quick And Dirty Way
Tags: webdev, imagemagick, firefox, branding
Published: 2020-03-19 18:55:43

---
title: Create Apple And Google Sign-In Buttons - Quick And Dirty Way
published: true
tags: Web Development,imagemagick,firefox,branding
canonical_url: https://www.oncrashreboot.com/create-apple-and-google-signin-buttons
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/af3kjt3va1tarumw6hjn.jpg
---

Both Apple and Google have extensive guidelines on how to use their respective logos and create sign-in buttons that use their services.

1. [Google Sign-In Branding Guidelines](https://developers.google.com/identity/branding-guidelines)
2. [Apple Sign-In Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/)

Both companies provide their logo artwork for download, in both vector and raster formats, that you can use to create these buttons.

1. [Google Sign-In Assets](https://developers.google.com/identity/branding-guidelines)
2. [Apple Design Resources](https://developer.apple.com/design/resources/)

## Apple sign-in button example[](#apple-sign-in-button-example "Permanent link")

Apple has a helpful article [Displaying Sign in with Apple Buttons](https://developer.apple.com/documentation/signinwithapplejs/displaying_sign_in_with_apple_buttons) on their website. It has a sample HTML code that if you write to a file and open the file in the browser, it will show you their branded sign-in button.

```html
<html>
  <head>
    <meta name="appleid-signin-client-id" content="[CLIENT_ID]" />
    <meta name="appleid-signin-scope" content="[SCOPES]" />
    <meta name="appleid-signin-redirect-uri" content="[REDIRECT_URI]" />
    <meta name="appleid-signin-state" content="[STATE]" />
  </head>
  <style>
    .signin-button {
      width: 210px;
      height: 40px;
    }
  </style>
  <body>
    <div
      id="appleid-signin"
      class="signin-button"
      data-color="black"
      data-border="true"
      data-type="sign in"
    ></div>
    <script
      type="text/javascript"
      src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"
    ></script>
  </body>
</html>
```

The `appleid.auth.js` script replaces the `div` that has the id `appleid-signin` with their SVG files.

## Google sign-in button example[](#google-sign-in-button-example "Permanent link")

If you visit the Google documentation on [Building a custom Google Sign-In button](https://developers.google.com/identity/sign-in/web/build-button), it has a ready to use sign-in button example, which complies with their guidelines.

## The quick and dirty way to create sign-in buttons[](#the-quick-and-dirty-way-to-create-sign-in-buttons "Permanent link")

If I were working on a serious project, I would have used their SVG logos and created reusable button components using React. Though, it will be arduous to ensure the buttons match their policies. I am sure a designer worth their salt would not see it as a challenge. But I am no designer.

I needed “Sign in with Google” and “Sign in with Apple” buttons for a **temporary** project. So I decided to phone it in.

I would customize the size and some minor attributes of the example buttons on their website using the browser’s “Inspector” tool and then take screenshots of them. I will use those images in my project.

I could have used the scripts they provide to load the buttons from their servers, but my project was going to run in an offline environment.

The button size I require is 210x50 with no rounded corners.

### Makeshift Google sign-in button[](#makeshift-google-sign-in-button "Permanent link")

I opened the Google documentation that has the [example button](https://developers.google.com/identity/sign-in/web/build-button) in the Firefox Developer Edition browser. Why Firefox Developer Edition? I will get to that, but it is essential to have Firefox Developer Edition.

I right-clicked and examined the button. It is almost the same size that I require.

![Inspect and edit the HTML of the Google sign-in button](https://dev-to-uploads.s3.amazonaws.com/i/ssr01n5nnv5esyuy76u1.png)<figcaption itemprop="caption description">
      Inspect and edit the <span>HTML</span> of the Google sign-in button
    </figcaption>

I only had to

1. Disable `box-shadow` in CSS
2. Set `border-radius` to 0
3. Set the width to 210px from 240px

Luckily, the width change is only minor; otherwise, the button and logo would get out of proportion.

I right-clicked the node and chose “Screenshot Node” option. This feature is why I used Firefox Developer Edition. It is one of the many features that make Firefox Developer Edition more effective than Chrome for web developers.

![Screenshot Node option in Firefox Developer](https://dev-to-uploads.s3.amazonaws.com/i/u9xit7kvo1uo83q68kcp.png)<figcaption itemprop="caption description">
      Screenshot Node option in Firefox Developer
    </figcaption>

### Makeshift Apple sign-in button[](#makeshift-apple-sign-in-button "Permanent link")

Apple sign-in button required a little extra work because they do not have any HTML button on their documentation site. Their documentation uses images of buttons to explain their guidelines.

No big deal. Remember the HTML code I [mentioned earlier](#apple-signin-button-example)? I modified it a little so that the button has a white background. You can see and run the code yourself [here](https://repl.it/@talha131/Displaying-Sign-in-with-Apple-Buttons).

![Sign in with Apple Default Button](https://dev-to-uploads.s3.amazonaws.com/i/zjlflyf5zn4r9s39fovp.png)

This button has rounded corners. On examining the rendered HTML in the browser inspector, I noticed it uses SVG for the border.

Removing `ry` attribute from the SVG removed the rounded corners.

```xml
<rect width="100%" height="100%" ry="15%" fill="#fff" stroke="black" stroke-width="1" stroke-linecap="round"></rect>
```

I adjusted the height of the root `div` from 40px to 50px. Width was already 210px. Then I right clicked on the root `div` and selected the “Screenshot Node” option.

![Sign in with Apple button has white border](https://dev-to-uploads.s3.amazonaws.com/i/ol5mzxa5xo257w7mbvwm.png)

The resulting image had white borders outside the black outline of the button. I am not sure what the reason is.

It’s a quick and dirty hack. So I didn’t investigate it further. Instead, I set the `background-color` of the `body` to black using Firefox’s CSS editor.

Now when I took the screenshot of the node, the result did not have the white border.

![Sign in with Apple button with black border](https://dev-to-uploads.s3.amazonaws.com/i/lus6bjader0uzlgz2tpe.png)

### Adjust the image size[](#adjust-the-image-size "Permanent link")

Now I examined the image sizes using the good, old, trusty [ImageMagick](https://imagemagick.org/).

```shell
$ identify apple.png
apple.png PNG 1260x300 1260x300+0+0 8-bit sRGB 22512B 0.000u 0:00.000
$ identify google.png
google.png PNG 420x100 420x100+0+0 8-bit sRGB 5914B 0.000u 0:00.000
```

Focus on the part that comes after `PNG`. That’s the dimension.

You see that `google.png` dimension is 420x100. But in the browser, I set it to 210x50. What happened? Retina display happened. My machine has a retina display because of which this image is 2x its set size.

Apple button size is enormous. I have to cut it down.

```shell
convert apple.png -resize x100 apple-h100.png
```

`-resize` tells ImageMagick to resize the input image.

`x100` means set the height to 100, and adjust the width to keep the perspective.

Let’s check the dimensions of the result.

```shell
$ identify apple-h100.png
apple-h100.png PNG 420x100 420x100+0+0 8-bit Gray 256c 4725B 0.000u 0:00.000
```

So now I have a Google sign-in button image, and an Apple sign-in button image, in my required dimensions, which 100% conforms to the official guidelines.

I ran both the images through [ImageOptim](https://imageoptim.com/mac) to reduce their sizes, which decreased their sizes to 4kb each.

![Sign in with Google](https://dev-to-uploads.s3.amazonaws.com/i/1ljet6qw1biu3r5a2t0r.png)

![Sign in with Apple](https://dev-to-uploads.s3.amazonaws.com/i/m3n26yfj6pdm45aj3o9f.png)

## Conclusion[](#conclusion "Permanent link")

Honestly, it took me more time to write this article than it took me to get the image buttons.

But should you use this _“technique”_ in the production?

Although each image has a minuscule size of 4kb each, your web page will still have to make additional two requests to the server to fetch them. Usually, we want to minimize the number of requests to the server to improve the page’s performance. Therefore, I would not advise using it in production.

Then again, it is possible to use loader like [this](https://www.npmjs.com/package/base64-inline-loader) to convert your image to base64 encoded strings automatically and inline them. If your build pipeline supports such loader, then you can use the images without worrying about the additional requests. But if you use the loader for too many images, then your page size will get hefty.

So choose wisely!

--- 
Cover Image Attribution: [James Sutton](https://unsplash.com/@jamessutton_photography)