Problems rendering G+ sign-in button

Question

It doesn't take the desired shape.

The desired appearance

What is shows

The CSS and the HTML of the desired state

<span id="gp" class="gplus customGPlusSignIn"></span>


#social span{

width:45px;
height:45px;
cursor:pointer;
background-size: cover; 
position:absolute;

border-radius: 50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
}
.gplus{
background: transparent url('asdsadasdfsd/gplus.png') no-repeat left top;
}

The JS of the button

<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('gp', {
      //'callback': 'signinCallback',
      'clientid': '<hipitihop>.apps.googleusercontent.com',
      'cookiepolicy': 'single_host_origin',
      'requestvisibleactions': 'http://schemas.google.com/AddActivity',
      'scope': 'https://www.googleapis.com/auth/plus.login'
    });
  }
</script>

What is wrong and I can't render the button?

Answer 1

Hm, it seems it needs another anchor. The below works

  <div id="customBtn" class="customGPlusSignIn">
      <span id="gp" class="gplus"></span>
    </div>

Thanks @Dyllen James Owens for suggesting a JSfiddle.

You can find the code at fiddle http://jsfiddle.net/mHcdv/3/