SB
1
How to write a:visited in inline CSS?
My company recently rebranded and one of the design elements put in place in our emails was purple CTA buttons to match the purple that is now the prominent color in our new brand. The purple buttons have white text. The issue we are having is that when users click on the text in the email the text becomes purple and the button looks like a solid block of color without any text.
This is the coding for the button:
<table border="0" cellpadding="10" cellspacing="0" class="wtw-register-btn" style="background-color: #702082;color: #000;font-family: Arial;font-size: 18px;font-weight: normal;line-height: 120%;text-align: left;text-transform: uppercase;text-decoration: none;border-collapse: separate !important;" width="100%">
<tbody>
<tr>
<td style="border-collapse: collapse;">
<h5 style="color: #000;display: block;font-family: Arial;font-size: 15px;mso-line-height-rule: exactly;line-height: 140%;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 0;text-align: center;"><a href="https://www.google.com" name="event_tool_3" style="color: #fff;font-weight: bold;text-decoration: none;" xt="SPCLICK">
Register for event</a></h5>
</td>
</tr>
</tbody>
</table>
I have tried to implement the following as a solution:
Add a class to the register button where the h5 is –
<h5 class=”wtw-register-button”><a href=”#”>Register for Event</a></h5>
And add this css:
.wtw-register-button > a:visited {color: #fff;}
However, it has not fixed the issue on the tests I have run.
Is there another way to change the "visited color" that renders consistently across email platforms?
Thanks
Steve
Heya,
in the code you have pasted in, you've put the class 'wtw-register-button' on the table, not the h5
~Kris
Thank you very much for your help Kris.
I made that adjustment and it works in Yahoo mail and is staying white on that platform.
However, it appears that Outlook overrides that style. (We are B2B and most emails going to Outlook.
This is the updated code:
I don't think Outlook recognises
>so maybe change your CSS to.wtw-register-button a:visited {color: #fff;}No need for the
>unless your'e trying to avoid deeper nested links.Thank you Mark. I tried a couple of modifications but it did not seem to make a difference.
Did you mean that I should adjust the following?
class="wtw-register-btn"
Thank you
Steve