css sign in with google

<div class='g-sign-in-button'>
    <div class=content-wrapper>
        <div class='logo-wrapper'>
            <img src='https://developers.google.com/identity/images/g-logo.png'>
        </div>
        <span class='text-container'>
      <span>Sign in with Google</span>
    </span>
    </div>
</div>

<style>
        *, *:before, *:after {
            box-sizing: border-box;
        }

        .g-sign-in-button {
            margin: 10px;
            display: inline-block;
            width: 240px;
            height: 50px;
            background-color: #4285f4;
            color: #fff;
            border-radius: 1px;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
            transition: background-color .218s, border-color .218s, box-shadow .218s;
        }

        .g-sign-in-button:hover {
            cursor: pointer;
            -webkit-box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
            box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
        }

        .g-sign-in-button:active {
            background-color: #3367D6;
            transition: background-color 0.2s;
        }

        .g-sign-in-button .content-wrapper {
            height: 100%;
            width: 100%;
            border: 1px solid transparent;
        }

        .g-sign-in-button img {
            width: 18px;
            height: 18px;
        }

        .g-sign-in-button .logo-wrapper {
            padding: 15px;
            background: #fff;
            width: 48px;
            height: 100%;
            border-radius: 1px;
            display: inline-block;
        }

        .g-sign-in-button .text-container {
            font-family: Roboto,arial,sans-serif;
            font-weight: 500;
            letter-spacing: .21px;
            font-size: 16px;
            line-height: 48px;
            vertical-align: top;
            border: none;
            display: inline-block;
            text-align: center;
            width: 180px;
        }

</style>

View another examples Add Own solution

4.5

Kundor 80 points

                                    &lt;html&gt;&lt;head&gt;&nbsp; &lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;&nbsp; &lt;script src=&quot;https://apis.google.com/js/api:client.js&quot;&gt;&lt;/script&gt;&nbsp; &lt;script&gt;&nbsp; var googleUser = {};&nbsp; var startApp = function() {&nbsp; &nbsp; gapi.load('auth2', function(){&nbsp; &nbsp; &nbsp; // Retrieve the singleton for the GoogleAuth library and set up the client.&nbsp; &nbsp; &nbsp; auth2 = gapi.auth2.init({&nbsp; &nbsp; &nbsp; &nbsp; client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',&nbsp; &nbsp; &nbsp; &nbsp; cookiepolicy: 'single_host_origin',&nbsp; &nbsp; &nbsp; &nbsp; // Request scopes in addition to 'profile' and 'email'&nbsp; &nbsp; &nbsp; &nbsp; //scope: 'additional_scope'&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; attachSignin(document.getElementById('customBtn'));&nbsp; &nbsp; });&nbsp; };&nbsp; function attachSignin(element) {&nbsp; &nbsp; console.log(element.id);&nbsp; &nbsp; auth2.attachClickHandler(element, {},&nbsp; &nbsp; &nbsp; &nbsp; function(googleUser) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('name').innerText = &quot;Signed in: &quot; +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; googleUser.getBasicProfile().getName();&nbsp; &nbsp; &nbsp; &nbsp; }, function(error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(JSON.stringify(error, undefined, 2));&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; }&nbsp; &lt;/script&gt;&nbsp; &lt;style type=&quot;text/css&quot;&gt;&nbsp; &nbsp; #customBtn {&nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; background: white;&nbsp; &nbsp; &nbsp; color: #444;&nbsp; &nbsp; &nbsp; width: 190px;&nbsp; &nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; &nbsp; border: thin solid #888;&nbsp; &nbsp; &nbsp; box-shadow: 1px 1px 1px grey;&nbsp; &nbsp; &nbsp; white-space: nowrap;&nbsp; &nbsp; }&nbsp; &nbsp; #customBtn:hover {&nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; }&nbsp; &nbsp; span.label {&nbsp; &nbsp; &nbsp; font-family: serif;&nbsp; &nbsp; &nbsp; font-weight: normal;&nbsp; &nbsp; }&nbsp; &nbsp; span.icon {&nbsp; &nbsp; &nbsp; background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;&nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; &nbsp; width: 42px;&nbsp; &nbsp; &nbsp; height: 42px;&nbsp; &nbsp; }&nbsp; &nbsp; span.buttonText {&nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; &nbsp; padding-left: 42px;&nbsp; &nbsp; &nbsp; padding-right: 42px;&nbsp; &nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; &nbsp; /* Use the Roboto font that is loaded in the &lt;head&gt; */&nbsp; &nbsp; &nbsp; font-family: 'Roboto', sans-serif;&nbsp; &nbsp; }&nbsp; &lt;/style&gt;&nbsp; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &lt;!-- In the callback, you would hide the gSignInWrapper element on a&nbsp; successful sign in --&gt;&nbsp; &lt;div id=&quot;gSignInWrapper&quot;&gt;&nbsp; &nbsp; &lt;span class=&quot;label&quot;&gt;Sign in with:&lt;/span&gt;&nbsp; &nbsp; &lt;div id=&quot;customBtn&quot; class=&quot;customGPlusSignIn&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;span class=&quot;icon&quot;&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &lt;span class=&quot;buttonText&quot;&gt;Google&lt;/span&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &lt;/div&gt;&nbsp; &lt;div id=&quot;name&quot;&gt;&lt;/div&gt;&nbsp; &lt;script&gt;startApp();&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;

Thank you! 10

4.5 (10 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category CSS

CSS 2022-03-27 22:50:16 make text bigger html5
CSS 2022-03-27 21:40:08 move list item to left css
CSS 2022-03-27 21:35:05 reduce image size css
CSS 2022-03-27 21:30:21 css image background center horizontally in div
CSS 2022-03-27 21:05:02 css button styles
CSS 2022-03-27 18:50:09 compass font awesome
CSS 2022-03-27 18:50:06 modal in materialize css
CSS 2022-03-27 17:55:12 box round corner css
CSS 2022-03-27 17:45:12 jquery add css
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

css sign in with google

Welcome Back!

Create a Free Account