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

问题

I am trying to make a google+ siginin button for my site. I went through this link https://developers.google.com/+/web/signin/#button_attributes and tried to make it working but now my styling is all messed up. I am not able to mess around with the [class='g-sinin'] in CSS.

This is my code:

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

This is my css:

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

How do I hide the default classclass='g-signin' or make it good. If I remove the class inside the span then whole google+ signin function goes off. Can anyone tell me how can I make the siginin function work when clicked on the background image.

回答1:

The documentation now includes a demo and code examples for how to customize the Google+ Sign-In button as well as some key information about guidelines.

freshbm's answer is close, but has multiple problems in the example so that will not work.

The following code includes all the required parameters and correctly generates a sign-in button from custom markup. It would be entirely up to you to stylize the button and icon, while making sure to follow the 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>

来源：https://stackoverflow.com/questions/15287669/google-signin-button-class-g-signin

标签

javascript

css3

button

google-plus

signing