Google SignInボタンを画像を使って作成する

以下のガイドラインにあるファイルを使って、
Google SignInボタンを実装したときの備忘録。

• ログインにおけるブランドの取り扱いガイドライン  |  Google Identity Platform  |  Google Developers

background-imageを使って画像を設定し、
疑似要素を使って画像を切り替える感じ。

Vueコンポーネント

<template>
  <a class="google-signin" :class="{ 'is-disabled': disabled }" />
</template>


<script lang="ts">
import { Component, Prop, Vue } from "nuxt-property-decorator";

@Component
export default class ButtonGoogleLogin extends Vue {
  @Prop({ default: false }) disabled!: boolean;
  @Prop({ default: true }) dark!: boolean;
}
</script>

<style lang="scss">
.google-signin {
  background-image: url("/btn_google_signin_light_normal_web.png");
  display: inline-block;
  width: 191px;
  height: 46px;
  background-color: transparent;

  &:hover {
    background-image: url("/btn_google_signin_light_focus_web.png");
    cursor: pointer;
  }
  &:active {
    background-image: url("/btn_google_signin_light_pressed_web.png");
  }

  &.is-disabled {
    background-image: url("/btn_google_signin_light_disabled_web.png");
  }
}
</style>

以上!!

参考にしたサイトさま

• ログインにおけるブランドの取り扱いガイドライン  |  Google Identity Platform  |  Google Developers
• Google signin buttons