Cambiar estilo de botones sociales de Incio de sesión

Hola betas,
Saludos.

Tengo una web en wordpress que viene con unos botones para iniciar sesión a través de Google o Facebook, pero quisiera cambiarlos de estilo, no me gustan.
Mi web: https://badyapp.com (Dejo screenshots) para acceder a esta parte y pedan ver los botones.

Los quisiera cambiar por este estilo:
Google: https://nextendweb.com/nextend-social-login-docs/provider-google/
Facebook: https://nextendweb.com/nextend-social-login-docs/provider-facebook/

Con el texto: Ingresar con Google / Ingresar con Facebook

Boton google

1. Modificamos <a> quitandole la class 'rz-button rz--gg' y le agregamos un class por ejemplo 'puk0' para el boton ...

<a href="#" class="puk0" data-action="sign-in-google" ...

.puk0 {
background: #fff;
text-align: center;
padding: 7px;
text-decoration: none;
box-shadow: 0px 1px 5px #ccc;
-moz-box-shadow: 0px 1px 5px #ccc;
-webkit-box-shadow: 0px 1px 5px #ccc;
-o-box-shadow: 0px 1px 5px #ccc;
-ms-box-shadow: 0px 1px 5px #ccc;
font-family: 'Arial Narrow', Arial, sans-serif;
}

2. Le agregamos el icono svg google a un lado de <span> Continuar ...

<a href="#" class="puk0" data-action="sign-in-google" style="--x: 204px; --y: 24.833328247070312px;">

<svg width="1em" data-e2e="" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M43 24.4313C43 23.084 42.8767 21.7885 42.6475 20.5449H24.3877V27.8945H34.8219C34.3724 30.2695 33.0065 32.2818 30.9532 33.6291V38.3964H37.2189C40.885 35.0886 43 30.2177 43 24.4313Z" fill="#4285F4"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M24.3872 43.001C29.6219 43.001 34.0107 41.2996 37.2184 38.3978L30.9527 33.6305C29.2165 34.7705 26.9958 35.4441 24.3872 35.4441C19.3375 35.4441 15.0633 32.1018 13.5388 27.6108H7.06152V32.5337C10.2517 38.7433 16.8082 43.001 24.3872 43.001Z" fill="#34A853"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5395 27.6094C13.1516 26.4695 12.9313 25.2517 12.9313 23.9994C12.9313 22.7472 13.1516 21.5295 13.5395 20.3894V15.4668H7.06217C5.74911 18.0318 5 20.9336 5 23.9994C5 27.0654 5.74911 29.9673 7.06217 32.5323L13.5395 27.6094Z" fill="#FBBC04"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M24.3872 12.5568C27.2336 12.5568 29.7894 13.5155 31.7987 15.3982L37.3595 9.94866C34.0018 6.88281 29.6131 5 24.3872 5C16.8082 5 10.2517 9.25777 7.06152 15.4674L13.5388 20.39C15.0633 15.8991 19.3375 12.5568 24.3872 12.5568Z" fill="#EA4335"></path></svg>

<span>Continuar

a.puk0 svg {
width: max-content;
height: 26px;
left: 36px;
position: absolute;
}

3. Al <span> 'continuar con' le agregamos un class por ejemplo 'puk0Letra'

<span class="puk0Letra">Continuar con Google</span>

.puk0Letra {
font-size: 17px;
color: #7b7676;
}
4. Le agregamos un <span> con class a 'Google' por ejemplo "puk0google"

<span class="puk0Letra">Continuar con <span class="puk0google">Google</span></span>

.puk0google {
font-weight: bold;
}

Y al final le cambiamos el 'continuar' por 'ingresar'

En resumen ...

Html ---

<a href="#" class="puk0" data-action="sign-in-google" style="--x: 204px; --y: 24.833328247070312px;">
<svg width="1em" data-e2e="" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M43 24.4313C43 23.084 42.8767 21.7885 42.6475 20.5449H24.3877V27.8945H34.8219C34.3724 30.2695 33.0065 32.2818 30.9532 33.6291V38.3964H37.2189C40.885 35.0886 43 30.2177 43 24.4313Z" fill="#4285F4"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M24.3872 43.001C29.6219 43.001 34.0107 41.2996 37.2184 38.3978L30.9527 33.6305C29.2165 34.7705 26.9958 35.4441 24.3872 35.4441C19.3375 35.4441 15.0633 32.1018 13.5388 27.6108H7.06152V32.5337C10.2517 38.7433 16.8082 43.001 24.3872 43.001Z" fill="#34A853"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5395 27.6094C13.1516 26.4695 12.9313 25.2517 12.9313 23.9994C12.9313 22.7472 13.1516 21.5295 13.5395 20.3894V15.4668H7.06217C5.74911 18.0318 5 20.9336 5 23.9994C5 27.0654 5.74911 29.9673 7.06217 32.5323L13.5395 27.6094Z" fill="#FBBC04"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M24.3872 12.5568C27.2336 12.5568 29.7894 13.5155 31.7987 15.3982L37.3595 9.94866C34.0018 6.88281 29.6131 5 24.3872 5C16.8082 5 10.2517 9.25777 7.06152 15.4674L13.5388 20.39C15.0633 15.8991 19.3375 12.5568 24.3872 12.5568Z" fill="#EA4335"></path></svg>
<span class="puk0Letra">Ingresar con <span class="puk0google">Google</span></span>

Css ----

.puk0 {
background: #fff;
text-align: center;
padding: 7px;
text-decoration: none;
box-shadow: 0px 1px 5px #ccc;
-moz-box-shadow: 0px 1px 5px #ccc;
-webkit-box-shadow: 0px 1px 5px #ccc;
-o-box-shadow: 0px 1px 5px #ccc;
-ms-box-shadow: 0px 1px 5px #ccc;
font-family: 'Arial Narrow', Arial, sans-serif;
}
a.puk0 svg {
width: max-content;
height: 26px;
left: 36px;
position: absolute;
}
.puk0Letra {
font-size: 17px;
color: #7b7676;
}
.puk0google {
font-weight: bold;
}

Previo ...