Usa "Acceso con Google" con los alcances de profile
o email
básicos, y agrega los siguientes botones estándar a tu app web o para dispositivos móviles:
Estilo | Botones | Archivos de imagen |
---|---|---|
Claro |
![]() |
Incluye los botones de acceso en formatos PNG, SVG, EPS y de Sketch, en diferentes resoluciones. Incluye los estados regular (cuando no se realiza ninguna acción con el botón), desplazamiento (cuando se desplaza el cursor sobre el botón) y presionado (cuando se presiona el botón). |
Oscuro |
![]() |
Los archivos SVG, EPS y de Sketch se incluyen en la descarga para que puedas traducir el texto "Acceder con" y "Acceder". Estos archivos requieren la fuente Roboto.
Si solicitas alcances adicionales, debes hacerlo con la autorización incremental (Android, iOS, web), es decir, solo debes pedirle al usuario la autorización cuando comience a interactuar con una función que requiere acceso de API.
Si solicitas alcances para YouTube, usa un botón de YouTube.
Si usas los Servicios de juego de Google Play, también consulta las guías para el desarrollo de la marca de estos servicios.
"Acceso con Google" y otras opciones de acceso de terceros
Importancia equivalente
El botón de "Acceso con Google" debe mostrarse al menos con la misma importancia que las otras opciones de acceso de terceros. Por ejemplo, los botones deben tener aproximadamente el mismo impacto visual y tamaño.
Cómo hacer coincidir el estilo de tu app
Se recomienda usar el botón estándar de "Acceso con Google", dado que les permite a los usuarios de Google identificar nuestra opción de forma más rápida. Si necesitas adaptar el botón para que coincida con el diseño de tu app o traducir el texto "Acceder con" o "Acceder", sigue estas guías.
Tamaño
Puedes modificar el botón según sea necesario para diferentes dispositivos y tamaños de pantalla, pero debes conservar la relación de aspecto para que el logotipo de Google no se deforme.
Texto
Para estimular a los usuarios a hacer clic en el botón, recomendamos usar el texto de llamado a la acción "Acceder con Google " o "Registrarse con Google". El usuario debe tener en claro que accede a tu app o se registra en ella con sus credenciales de Google, no que accede a una Cuenta de Google ni que se registra en una cuenta mediante tu app.
Texto "Google"
Puedes usar solo la palabra "Google" en el botón si está acompañada por texto que deje en claro el tipo de acción que se realiza. Por ejemplo:
Acceder con:
Color


El color para un botón claro sin presionar es #FFFFFF (blanco). El color para el botón oscuro (azul) sin presionar es #4285F4. El fondo del botón puede ser blanco o azul, pero el botón siempre debe incluir el logotipo de la "G" de Google con los colores estándar en un recuadro blanco.
Fuente
La fuente del botón es Roboto Medium, una fuente TrueType. Para instalarla, primero descarga la fuente Roboto y, luego, descomprime el paquete de descarga. En Mac, haz doble clic en Roboto-Medium.ttf y, luego, en "Instalar fuente". En Windows, arrastra el archivo a "Mi computadora" > "Windows" > carpeta "Fuentes". No uses otra fuente en el botón, excepto como se indica en las situaciones de la sección Cómo hacer coincidir el estilo de tu app.
Para los sitios web que usan un botón de acceso personalizado, puedes cargar la fuente Roboto de Google Fonts.
Padding
El padding a la izquierda (y derecha) del texto debe ser de 8 dp. El logotipo debe ser de 18 dp, y debe haber 24 dp entre el logotipo y el texto del botón.

Logotipo de Google en el botón "Acceder con Google"
Más allá del texto, no puedes cambiar el tamaño ni el color del logotipo de la "G" de Google. Debe usarse la versión en color estándar y aparecer con un fondo blanco. Si necesitas crear tu propio logotipo de Google con un tamaño personalizado, comienza con cualquiera de los tamaños de logotipos que se incluyen en el paquete de descarga.

Diseño incorrecto del botón
![]() ![]() |
No uses el ícono ni el logotipo de Google aislados, sin el recuadro del botón ni el texto que indique la acción del usuario. |
![]() ![]() |
No uses un ícono de Google aislado para representar "Acceso con Google". |
![]() ![]() |
No uses la versión oscura ni clara de la "G" de Google. |
![]() |
No coloques el ícono de la "G" de Google en color estándar sobre un fondo de color. |
![]() |
No crees tu propio ícono para el botón. |
![]() ![]() |
No uses el término "Google" aislado, sin el ícono de Google que lo acompaña. |
El uso de las marcas de Google de una forma que no se mencione expresamente en este documento no está permitido sin contar con el consentimiento previo por escrito de Google (para obtener más información, consulta las Guías para el uso de terceros de las características de marca de Google).