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%;">



              .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;





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




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



                                      <td class="td-activate">

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