Highlighted

Changing font/text color in rollover button for navbar

Community Beginner ,
Dec 28, 2017

Copy link to clipboard

Copied

*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!!!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

<meta charset="utf-8">

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

<table cellpadding="5" cellspacing="2">

<tr>

<td style="width:20%">

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

</td>

<td style="width:20%">

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

</td>

<td style="width:20%">

<a class="nav" href="#" target="_blank">SOME LINK</a>

</td>

<td style="width:20%">

<a class="nav" href="#" target="_blank">SOME LINK</a>

</td>

<td style="width:20%">

<a class="nav" href="#" target="_blank">SOME LINK</a>

</td>

</tr>

</table>

</body>

</html>

TOPICS
Create menus in Dreamweaver

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Changing font/text color in rollover button for navbar

Community Beginner ,
Dec 28, 2017

Copy link to clipboard

Copied

*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!!!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

<meta charset="utf-8">

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

<table cellpadding="5" cellspacing="2">

<tr>

<td style="width:20%">

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

</td>

<td style="width:20%">

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

</td>

<td style="width:20%">

<a class="nav" href="#" target="_blank">SOME LINK</a>

</td>

<td style="width:20%">

<a class="nav" href="#" target="_blank">SOME LINK</a>

</td>

<td style="width:20%">

<a class="nav" href="#" target="_blank">SOME LINK</a>

</td>

</tr>

</table>

</body>

</html>

TOPICS
Create menus in Dreamweaver

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 28, 2017 0
Adobe Community Professional ,
Dec 28, 2017

Copy link to clipboard

Copied

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>

<meta charset="utf-8">

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

<table cellpadding="5" cellspacing="2">

<tr>

<td style="width:20%">

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

</td>

<td style="width:20%">

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

</td>

<td style="width:20%">

<a class="nav" href="#" target="_blank">SOME LINK</a>

</td>

<td style="width:20%">

<a class="nav" href="#" target="_blank">SOME LINK</a>

</td>

<td style="width:20%">

<a class="nav" href="#" target="_blank">SOME LINK</a>

</td>

</tr>

</table>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 28, 2017 2
Ben M LATEST
Adobe Community Professional ,
Dec 28, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 28, 2017 0