By Paul Scanlon
A set of: "Sign In With Google" Buttons Made With Tailwind
- Tailwind
In this post I’ll provide several code snippets for the various types of “Sign in with Google” buttons that are available. All the styles have been created using Tailwind.
You can see all the code used to create the buttons on my GitHub:
Tailwind Config
I’ve added the various Google brand colors to the Tailwind theme config object, this will allow you to reference colors by their class name, e.g bg-google-button-blue.
Add the following to your own tailwind.config.js file.
// tailwind.config.js
export default {
...
theme: {
extend: {
colors: {
...
google: {
'text-gray': '#3c4043',
'button-blue': '#1a73e8',
'button-blue-hover': '#5195ee',
'button-dark': '#202124',
'button-dark-hover': '#555658',
'button-border-light': '#dadce0',
'logo-blue': '#4285f4',
'logo-green': '#34a853',
'logo-yellow': '#fbbc05',
'logo-red': '#ea4335',
},
},
},
},
...
};
Light Rectangular
<!--light-rectangular-->
<button
aria-label="Sign in with Google"
class="flex items-center bg-white border border-button-border-light rounded-md p-0.5 pr-3"
>
<div class="flex items-center justify-center bg-white w-9 h-9 rounded-l">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
<title>Sign in with Google</title>
<desc>Google G Logo</desc>
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
class="fill-google-logo-blue"
></path>
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
class="fill-google-logo-green"
></path>
<path
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
class="fill-google-logo-yellow"
></path>
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
class="fill-google-logo-red"
></path>
</svg>
</div>
<span class="text-sm text-google-text-gray tracking-wider">Sign in with Google</span>
</button>Blue Rectangular
<!--blue rectangular-->
<button
aria-label="Sign in with Google"
class="flex items-center gap-3 bg-google-button-blue rounded-md p-0.5 pr-3 transition-colors duration-300 hover:bg-google-button-blue-hover"
>
<div class="flex items-center justify-center bg-white w-9 h-9 rounded-l">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
<title>Sign in with Google</title>
<desc>Google G Logo</desc>
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
class="fill-google-logo-blue"
></path>
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
class="fill-google-logo-green"
></path>
<path
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
class="fill-google-logo-yellow"
></path>
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
class="fill-google-logo-red"
></path>
</svg>
</div>
<span class="text-sm text-white tracking-wider">Sign in with Google</span>
</button>Dark Rectangular
<!--dark rectangular-->
<button
aria-label="Sign in with Google"
class="flex items-center gap-3 bg-google-button-dark rounded-md p-0.5 pr-3 transition-colors duration-300 hover:bg-google-button-dark-hover"
>
<div class="flex items-center justify-center bg-white w-9 h-9 rounded-l">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
<title>Sign in with Google</title>
<desc>Google G Logo</desc>
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
class="fill-google-logo-blue"
></path>
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
class="fill-google-logo-green"
></path>
<path
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
class="fill-google-logo-yellow"
></path>
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
class="fill-google-logo-red"
></path>
</svg>
</div>
<span class="text-sm text-white tracking-wider">Sign in with Google</span>
</button>Light Pill
<!--light pill-->
<button
aria-label="Sign in with Google"
class="flex items-center bg-white border border-button-border-light rounded-full p-0.5 pr-4"
>
<div class="flex items-center justify-center bg-white w-9 h-9 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
<title>Sign in with Google</title>
<desc>Google G Logo</desc>
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
class="fill-google-logo-blue"
></path>
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
class="fill-google-logo-green"
></path>
<path
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
class="fill-google-logo-yellow"
></path>
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
class="fill-google-logo-red"
></path>
</svg>
</div>
<span class="text-sm text-google-text-gray tracking-wider">Sign in with Google</span>
</button>Blue Pill
<!--blue pill-->
<button
aria-label="Sign in with Google"
class="flex items-center gap-3 bg-google-button-blue rounded-full p-0.5 pr-4 transition-colors duration-300 hover:bg-google-button-blue-hover"
>
<div class="flex items-center justify-center bg-white w-9 h-9 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
<title>Sign in with Google</title>
<desc>Google G Logo</desc>
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
class="fill-google-logo-blue"
></path>
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
class="fill-google-logo-green"
></path>
<path
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
class="fill-google-logo-yellow"
></path>
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
class="fill-google-logo-red"
></path>
</svg>
</div>
<span class="text-sm text-white tracking-wider">Sign in with Google</span>
</button>Dark Pill
<!--dark pill-->
<button
aria-label="Sign in with Google"
class="flex items-center gap-3 bg-google-button-dark rounded-full p-0.5 pr-4 transition-colors duration-300 hover:bg-google-button-dark-hover"
>
<div class="flex items-center justify-center bg-white w-9 h-9 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
<title>Sign in with Google</title>
<desc>Google G Logo</desc>
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
class="fill-google-logo-blue"
></path>
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
class="fill-google-logo-green"
></path>
<path
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
class="fill-google-logo-yellow"
></path>
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
class="fill-google-logo-red"
></path>
</svg>
</div>
<span class="text-sm text-white tracking-wider">Sign in with Google</span>
</button>And that’s it. Enjoy!