Przycisk z logowaniem do Google+ [class = 'g-signin']

Question

Próbuję utworzyć przycisk Google + Siginin dla mojej witryny. Przeszedłem przez ten link https://developers.google.com/+/web/signin/#button_attributes i starałem się, aby działało, ale teraz moja stylizacja jest popsuta. Nie jestem w stanie poradzić sobie z [class = 'g-sinin'] w CSS.
To jest mój kod:

<section class='login_G' > 
    <span class='g-signin' data-callback='signinCallback' 
    data-scope='https://www.googleapis.com/auth/plus.login'></span> 
</section> 

To jest mój css:

.login_G { 
    cursor: pointer; 
    margin-left: 35px; 
    float: left; 
    height: 72px; 
    width: 72px; 
    background:url(images/register-google-sprite.png) 0 0; 
} 

Jak ukryć domyślnej klasy class='g-signin' lub zrobić to dobrze. Jeśli usuniemy klasę wewnątrz span, to cała funkcja logowania google + zostanie wyłączona. Czy ktoś może mi powiedzieć, jak mogę uruchomić funkcję siginin po kliknięciu na obrazie tła?

Answer 1

The documentation now includes a demo and code examples, aby dowiedzieć się, jak dostosować przycisk logowania do Google+, a także kilka kluczowych informacji na temat wytycznych.

Odpowiedź freshbm jest bliska, ale ma wiele problemów w przykładzie, więc nie będzie działać.

Poniższy kod zawiera wszystkie wymagane parametry i poprawnie generuje przycisk logowania z niestandardowych znaczników. Od Ciebie zależy stylizacja przycisku i ikony, przy jednoczesnym zachowaniu zgodności z branding guidelines.

<script type="text/javascript"> 
    (function() { 
    var po = document.createElement('script'); 
    po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/client:plusone.js?onload=render'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(po, s); 
    })(); 

    function render() { 
    gapi.signin.render('customBtn', { 
     'callback': 'signinCallback', 
     'clientid': 'xxxxxxxxxx.apps.googleusercontent.com', 
     'cookiepolicy': 'single_host_origin', 
     'scope': 'https://www.googleapis.com/auth/plus.login' 
    }); 
    } 
    function signinCallback(authResult) { 
    // Respond to signin, see https://developers.google.com/+/web/signin/ 
    } 
    </script> 
    <div id="customBtn" class="customGPlusSignIn"> 
    <span class="icon"></span> 
    <span class="buttonText">Google</span> 
    </div>