AnsweredAssumed Answered

New Gmail - issue with button text color

Question asked by Pavel Ivanov on May 9, 2018
Latest reply on May 10, 2018 by Pavel Ivanov

Hi guys,

 

Wanted to share something I came across today. As you know, Gmail launched a new look to their inbox. I am having trouble with a button color there and thought you might be interested to see. Of course, I'm open to suggestions - my code can probably improve and that might fix the issue.

 

So, long story short - I have a button that I would like to display with white text. It renders great in the old Gmail inbox, however, in the new version the button text is blue.

 

OLD Gmail:

OLD GMAIL.png

NEW Gmail:

NEW Gmail.png

Here's my code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;">

<head>

    <style>

        .activate-button {

            font-size: 14px;

            line-height: 23px;

            font-family: 'Lato', Arial, sans-serif;

            color: #fff;

            text-decoration: none;

            -webkit-border-radius: 5px;

            -moz-border-radius: 5px;

            border-radius: 5px;

            padding: 5px 10px;

            border: 1px solid #f29d5e;

            background-color: #f29d5e;

            display: inline-block;

        }

 

 

        .td-activate {

            -moz-hyphens: none;

            -webkit-text-size-adjust: 100%;

            mso-table-lspace: 0pt;

            mso-table-rspace: 0pt;

            word-break: break-word;

            -webkit-hyphens: none;

            -ms-text-size-adjust: 100%;

            -ms-hyphens: none;

            hyphens: none;

            border-collapse: collapse;

            color: #fff;

        }

    </style>

</head>

<body>

    <table align="center" border="0" cellpadding="0" cellspacing="0" width="200px">

        <tbody>

            <tr>

                <td>

                    <table border="0" cellspacing="0" cellpadding="0">

                        <tbody>

                            <tr>

                                <td class="td-activate">

                                    <a href="#" target="_blank" class="activate-button">AWESOME BUTTON</a>

                                </td>

                            </tr>

                        </tbody>

                    </table>

                </td>

            </tr>

        </tbody>

    </table>

</body>

</html>

Outcomes