Google Sign In Website Using Custom Text
The platform.js library from google is rendering the button, along with the text.
In order to override it, you need to build your own custom button. From Google's example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<script src="https://apis.google.com/js/api:client.js"></script>
<script>
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customBtn'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
document.getElementById('name').innerText = "Signed in: " +
googleUser.getBasicProfile().getName();
}, function(error) {
alert(JSON.stringify(error, undefined, 2));
});
}
</script>
<style type="text/css">
#customBtn {
display: inline-block;
background: #4285f4;
color: white;
width: 190px;
border-radius: 5px;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
}
span.label {
font-weight: bold;
}
span.icon {
background: url('{{path to your button image}}') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
border-right: #2265d4 1px solid;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 42px;
padding-right: 42px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
}
</style>
</head>
Note that you can find the actual icon file on Google's server for download.
Once you've set the styles and the Javascript, you would call the button itself through HTML, at which point you can specify the text:
<body>
<!-- In the callback, you would hide the gSignInWrapper element on a
successful sign in -->
<div id="gSignInWrapper">
<span class="label">Sign in with:</span>
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
<div id="name"></div>
<script>startApp();</script>
</body>
</html>
Note that you must comply with Google's branding guidelines.
Or you can just change the span text which is generated using Javascript, Try this replace your Div id with 'DivID' in the code
setTimeout(function () {
$('#DivID div div span span:last').text("Sign up with Google");
$('#DivID div div span span:first').text("Sign up with Google");
}, 3000);