Home
S. Patel
Continue with Google button

Continue with Google button

This tailwind example is contributed by S. Patel, on 14-May-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Social media links,

Button Social media buttons

Author S. Patel

24.1k

Fork Fullscreen

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-700">
    <button class="flex items-center bg-white dark:bg-gray-900 border border-gray-300 rounded-lg shadow-md px-6 py-2 text-sm font-medium text-gray-800 dark:text-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
        <svg class="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="-0.5 0 48 48" version="1.1"> <title>Google-color</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Color-" transform="translate(-401.000000, -860.000000)"> <g id="Google" transform="translate(401.000000, 860.000000)"> <path d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24" id="Fill-1" fill="#FBBC05"> </path> <path d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333" id="Fill-2" fill="#EB4335"> </path> <path d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667" id="Fill-3" fill="#34A853"> </path> <path d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24" id="Fill-4" fill="#4285F4"> </path> </g> </g> </g> </svg>
        <span>Continue with Google</span>
    </button>
</div>

Related Examples

Sign up with google button

Author:
Laurits

2 years ago

40.9k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Author:
Shakti

2 years ago

39.7k
Continue with social login buttons (google, linkedin, twitter, facebook, github, apple)
Login/signup buttons for Google, LinkedIn, Twitter, Facebook, GitHub, and Apple

Author:
Prajwal Hallale

2 years ago

17.1k
Login form with social login buttons

Author:
Task Master

2 years ago

19.3k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

16.9k
Continue with Discord button
Login with the Discord button for social login

Author:
Anonymous

2 years ago

12.1k
Social media icons svg

Author:
Samuel Dawson

2 years ago

21.2k
Sign in with facebook button

Author:
Conan Hilton

3 years ago

10.9k
Social media login modal
Popup model for social media login. i.e. google and GitHub. you can add more buttons according to your need

Author:
Sameer Sultana

2 years ago

15k
Buttons with Icon

Author:
_Amar_

3 years ago

15.7k
Gradient border button

Author:
Leon Bachmann

2 years ago

16.1k
Playstore Button
Download on the play store button

Author:
Arya

3 years ago

14.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components