Currently, I am in the process of designing an HTML email template. I have included a green button in the template and now need to eliminate the blue color from the hyperlink within the button.
I have exhaustively tried different solutions such as using !important declarations, text-decoration:none property, targeting a:active and a:focus states but nothing seems to work.
If there is anyone knowledgeable on this subject who can lend a hand, it would be greatly appreciated. The snippet of code related to the button in question is provided below:
/* Button hover styles */
.button-td,
.button-a {
transition: all 100ms ease-in;
color: #ffffff !important;
}
.button-td:hover,
.button-a:hover {
background: rbg(1,84,61);opacity: 0.8; !important;
border-color: rbg(1,84,61);opacity: 0.8; !important;
}
<!-- Button : Begin -->
</p>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:center;">
<tr>
<td style="border-radius: 3px; background: #01553d; text-align: center;" class="button-td"><a style="background: #01553d; border: 15px solid #01553d; padding: 0 10px; color: #ffffff !important; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" href="^slink^" class="button-a">
<font color="#FFFFFF"></font>
<!--[if mso]> <![endif]-->^slink^<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>