When a user registers via my application, Cognito sends an email with a verification link.
AWS Cognito provides a template ({## text ##}) that will transform to some form of link e.g. <a href='link-to-confirm'> text </a>.
How can I add CSS styles to this a tag?
You can use the <style> tag inside a <head> section. For example,
<head>
<style>
a {color : orange !important;}
a:hover {color : red !important;}
</style>
</head>
<body>
<a href="www.google.com">Test link</a>
{##Cognito link##}
</body>
I tried this myself, and in Gmail at least it works. It will also turn red when I hover over, just that I cannot screenshot it.

Just a final disclaimer, from what I know, email styling is best done inline (like <a style="...">...</a>). So depending on the email client, maybe this approach may not be supported. At least, I've tested this works in Gmail, though.
If you really need to use inline CSS, you can still achieve it by completely customizing the email using Cognito trigger to call a Lambda function. See this article for an example. I did not jump to this solution because this is mainly intended for when you need dynamic email content.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With