Google+ signin button [class = 'g-signin']

Question

Ich versuche eine Google + Siginin-Schaltfläche für meine Website zu erstellen. Ich ging durch diesen Link https://developers.google.com/+/web/signin/#button_attributes und versuchte, es funktioniert zu machen, aber jetzt ist mein Styling alles durcheinander. Ich bin nicht in der Lage, mit der [Klasse = 'g-sinin] in CSS herumzualbern.
Dies ist mein Code:

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

Das ist mein CSS:

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

Wie kann ich die Standardklasse class='g-signin' verstecken oder es gut machen. Wenn ich die Klasse innerhalb der Spanne entferne, wird die gesamte google + signin-Funktion deaktiviert. Kann mir jemand sagen, wie kann ich die Siginin-Funktion funktionieren, wenn Sie auf das Hintergrundbild klicken.

Answer 1

Die documentation now includes a demo and code examples, wie Sie den Google+ Log-in-Taste sowie einige wichtige Informationen über Richtlinien anzupassen.

friendbm's Antwort ist nahe, aber hat mehrere Probleme im Beispiel, so dass es nicht funktioniert.

Der folgende Code enthält alle erforderlichen Parameter und generiert ordnungsgemäß eine Anmelde-Schaltfläche aus benutzerdefinierten Markup. Es liegt ganz bei Ihnen, den Knopf und das Symbol zu stilisieren, während Sie sicher sein müssen, dass Sie dem branding guidelines folgen.

<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>