Html Email - Td Hover To Change Back Background-color Not Working

My codepen: http://codepen.io/leongaban/pen/iJBrn Note this isn't for a regular webpage, I'm building an HTML email, however for modern browsers / email clients it would be nice to

Solution 1:

You inline style is taking precedence over the external td.blue-button:hover.

Check this fiddle

Extract the class

td.blue-button {
    background-color: #006497;
}

td.blue-button:hover {
    background-color: #267aa6;
}

Solution 2:

Check this CodePen.

HTML:

<tablecellpadding="0"cellspacing="0"border="0"width="250"bgcolor="#ffffff"style="margin:0 auto;"><tr><tdclass="blue-button"width="250"align="center"style=""><ahref="#">reply to request</a></td></tr></table>

CSS:

td.blue-button:hover {
            background-color: #267aa6;
}

td.blue-button {
  font-family: Arial, sans-serif; 
  font-weight:bold;
  color:#ffffff;
  text-shadow: 1px1px3px#014568;
  background-color: #006497; 
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px; 
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px; 
  border-radius: 4px;
}

td.blue-buttona {
  color:#ffffff; 
  text-shadow: 1px1px3px#014568;
  text-decoration:none;
}