<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sign in with google Button</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> 
</head>
<body>
  <div class="g_body">
    <button class="g-button">
      <img class="g-logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/157px-Google_%22G%22_Logo.svg.png" alt="Google Logo">
      <p class="g-text">Sign in with Google</p>
    </button>
  </div>
</body>
</html>
*{
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.g_body{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g-button{
  border: 1px solid rgb(66, 133, 244);
  background: rgb(66, 133, 244);
  display: flex;
}

.g-logo{
  width: 21px;
  height: 21px;
  padding: 8px 10px;
  background: white;
}

.g-text{
  font-size: 16px;
  padding: 8px 10px;
  color: white;
  font-family: roboto;
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.