diff --git a/public/app/core/components/Login/LoginServiceButtons.tsx b/public/app/core/components/Login/LoginServiceButtons.tsx
index 93b256cdd0a..ba6399c0df3 100644
--- a/public/app/core/components/Login/LoginServiceButtons.tsx
+++ b/public/app/core/components/Login/LoginServiceButtons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import config from 'app/core/config';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 import { useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 
@@ -71,6 +71,9 @@ const getServiceStyles = (theme: GrafanaTheme) => {
       color: #d8d9da;
       margin: 0 0 ${theme.spacing.md};
       width: 100%;
+      &:hover {
+        color: #fff;
+      }
     `,
     divider: {
       base: css`
@@ -128,7 +131,7 @@ export const LoginServiceButtons = () => {
     return (
       <a
         key={key}
-        className={`${styles.button} btn btn-medium btn-service btn-service--${service.className || key}`}
+        className={cx(`btn btn-medium btn-service btn-service--${service.className || key}`, styles.button)}
         href={`login/${service.hrefName ? service.hrefName : key}`}
         target="_self"
       >