Javascript 谷歌+;登录按钮[class=';g-signin';]

Javascript 谷歌+;登录按钮[class=';g-signin';],javascript,css,button,google-plus,signing,Javascript,Css,Button,Google Plus,Signing,我正在尝试为我的网站制作一个google+siginin按钮。我通过这个链接,试图让它工作,但现在我的风格都搞砸了。我无法在CSS中处理[class='g-sinin']。 这是我的代码: <section class='login_G' > <span class='g-signin' data-callback='signinCallback' data-scope='https://www.googleapis.com/auth/plus.login'&g

我正在尝试为我的网站制作一个google+siginin按钮。我通过这个链接,试图让它工作,但现在我的风格都搞砸了。我无法在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>
如何隐藏默认类
class='g-sign'
或使其恢复正常。如果我删除span中的类,那么整个google+sign函数都会关闭。有谁能告诉我,当点击背景图像时,如何使siginin功能工作。

了解如何自定义Google+登录按钮以及有关指南的一些关键信息

freshbm的答案很接近,但在示例中存在多个问题,因此这不起作用

以下代码包括所有必需的参数,并从自定义标记正确生成登录按钮。按钮和图标的样式化将完全取决于您,同时确保遵循以下步骤


(功能(){
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);
})();
函数render(){
gapi.signin.render('customBtn'{
“回调”:“signinCallback”,
'clientid':'xxxxxxxxx.apps.googleusercontent.com',
'cookiepolicy':'single_host_origin',
'范围':'https://www.googleapis.com/auth/plus.login'
});
}
函数signinCallback(authResult){
//回复signin,参见https://developers.google.com/+/网页/登录/
}
谷歌

您想要什么效果?这在这里不是很清楚。@Albertexting,当点击背景图像时,我如何使siginin函数工作。你能发布一个实时版本给我们看吗?你也可以用,把按钮染成红色就够了吗?试试data-theme=“dark”我只使用过这个。但它在Google pagespeed中给了我们警告。。Levarge浏览器缓存。如果我删除,那么我的pagespeed分数将增加。如何解决这个问题。
.login_G {
  cursor: pointer;
  margin-left: 35px;
  float: left;
  height: 72px;
  width: 72px;
  background:url(images/register-google-sprite.png) 0 0;
}
<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>