Google+登录按钮[class ='g-signin']

Question

我正在尝试为我的网站制作一个谷歌+ siginin按钮.我浏览了这个链接https://developers.google.com/+/web/signin/#button_attributes并尝试使其正常工作,但现在我的造型都搞砸了.我无法搞乱CSS中的[class ='g-sinin'].
这是我的代码:

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

这是我的css:

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

如何隐藏默认类class='g-signin'或使其良好.如果我删除了跨度内的类,则整个google + signin函数会关闭.任何人都可以告诉我如何在单击背景图像时使siginin功能正常工作.

Answer 1

该文档现在包含有关如何自定义Google+登录按钮的演示和代码示例,以及有关指南的一些关键信息.

freshbm的答案很接近,但在示例中有多个问题,因此无法正常工作.

以下代码包含所有必需参数,并从自定义标记中正确生成登录按钮.完全由您来设置按钮和图标的样式,同时确保遵循品牌指南.

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