4 Replies Latest reply on May 10, 2018 2:11 AM by Pavel Ivanov

    New Gmail - issue with button text color

    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>