Changing font/text color in rollover button for navbar

Report · Dec 28, 2017

*this is for an email blast*

Hello, how do I change the rollover (hover) font/text color in my navbar? The buttons itself change and rollover, but the text stays the same.

Here is the code:

CSS:

/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}

HTML:

<tr>
<td width="20%" align="center" valign="top" bgcolor="#203b6f" style="text-align: center; padding-bottom: 15px;">
<center>
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="text-align: center;">
<tr>
<td width="110px" style="border-radius: 12px; text-align: center;" class="button-td">
<a href="http://www.cvent.com/events/2018-interface-seniors-housing-west/agenda-acb7447a9f594d7bad88835df6d3c..." target="_blank" style="background: #e2e3e4; border: 8px solid #e2e3e4; font-family: Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; display: block; border-radius: 12px;" class="button-a">
<span style="color:#203b6f;" class="button-link">AGENDA</span></a>
</td>
<td> </td>
<td width="110px" style="border-radius: 12px; text-align: center;" class="button-td">
<a href="http://www.cvent.com/events/2018-interface-seniors-housing-west/speakers-acb7447a9f594d7bad88835df6d..." target="_blank" style="background: #e2e3e4; border: 8px solid #e2e3e4; font-family: Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; display: block; border-radius: 12px;" class="button-a">
<span style="color:#203b6f;" class="button-link">SPEAKERS</span></a>
</td>
<td> </td>
<td width="110px" style="border-radius: 12px; text-align: center;" class="button-td">
<a href="http://www.cvent.com/events/2018-interface-seniors-housing-west/fees-acb7447a9f594d7bad88835df6d3c98..." target="_blank" style="background: #e2e3e4; border: 8px solid #e2e3e4; font-family: Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; display: block; border-radius: 12px;" class="button-a">
<span style="color:#203b6f;" class="button-link">REGISTER</span></a>
</td>
<td> </td>
<td width="110px" style="border-radius: 12px; text-align: center;" class="button-td">
<a href="http://www.cvent.com/events/2018-interface-seniors-housing-west/custom-17-acb7447a9f594d7bad88835df6..." target="_blank" style="background: #e2e3e4; border: 8px solid #e2e3e4; font-family: Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; display: block; border-radius: 12px;" class="button-a">
<span style="color:#203b6f;" class="button-link">SPONSORS</span></a>
</td>
<td> </td>
<td width="110px" style="border-radius: 12px; text-align: center;" class="button-td">
<a href="http://www.cvent.com/events/2018-interface-seniors-housing-west/travel-acb7447a9f594d7bad88835df6d3c..." target="_blank" style="background: #e2e3e4; border: 8px solid #e2e3e4; font-family: Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; display: block; border-radius: 12px;" class="button-a">
<span style="color:#203b6f;" class="button-link">VENUE</span></a>
</td>
</tr>
</table>
</center>
</td>
</tr>

Any help is appreciated. Thank you!!!

Report · Dec 28, 2017

Hover does not work on touch screens and span tags are not needed for any of this. So let's simplify things and just accept that some email clients will not support everything in your CSS.

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

.nav{

transition: all 100ms ease-in /**doubtful in emails**/

background: #e2e3e4;

border: 8px solid #e2e3e4;

font-family: Helvetica, Arial, sans-serif; font-size: 15px;

text-decoration: none;

display: block;

border-radius: 12px;

color:#203b6f;

text-align:center;

}

.nav:hover,

.nav:active,

.nav:focus{

background: #555;

border-color: #555 ;

color: yellow;

}

</style>

</head>

<body>

<tr>

<a class="nav" href="http://www.cvent.com/events/2018-interface-seniors-housing-west/agenda-acb7447a9f594d7bad8 8835df6d3c986.aspx" target="_blank">AGENDA</a>

</td>

<a class="nav" href="http://www.cvent.com/events/2018-interface-seniors-housing-west/speakers-acb7447a9f594d7ba d88835df6d3c986.aspx" target="_blank">SPEAKERS</a>

</td>

</td>

</td>

</td>

</tr>

</table>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 28, 2017

The color in your css for hover only looks at background-color, not the color property for the font. Once you add in that it should work. But it will only work in some email clients because some clients will strip out the CSS in the header of your email.

Changing font/text color in rollover button for navbar

1 Correct answer