LoginPage: Fix hover color for service buttons (#25009)

* Set explicit hover color

* Use cx

public/app/core/components/Login/LoginServiceButtons.tsx

 import React from 'react';
 import React from 'react';
 import config from 'app/core/config';
 import config from 'app/core/config';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 import { useStyles } from '@grafana/ui';
 import { useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 
 
@@ -71,6 +71,9 @@ const getServiceStyles = (theme: GrafanaTheme) => {
       color: #d8d9da;
       color: #d8d9da;
       margin: 0 0 ${theme.spacing.md};
       margin: 0 0 ${theme.spacing.md};
       width: 100%;
       width: 100%;
+      &:hover {
+        color: #fff;
+      }
     `,
     `,
     divider: {
     divider: {
       base: css`
       base: css`
@@ -128,7 +131,7 @@ export const LoginServiceButtons = () => {
     return (
     return (
       <a
       <a
         key={key}
         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}`}
         href={`login/${service.hrefName ? service.hrefName : key}`}
         target="_self"
         target="_self"
       >
       >