Hi all -

Trying to incorporate a hover effect on a bulletproof button so when someone puts their cursor over it the color changes from black to blue. It works when I inspect in web but when I QA the effect is not working. Has anyone else run into this issue and come up with a fix? Thanks in advance! (Code below)

<!-- If you see this message, please enable HTML e-mail -->

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">

/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ /
#outlook a{padding:0;} /
Force Outlook to provide a "view in browser" message /
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.yshortcuts, a .yshortcuts, a .yshortcuts:hover, a .yshortcuts:active, a .yshortcuts:focus{
background-color:transparent !important;
border:none !important;
color:inherit !important;
} /
Prevent Yahoo! from styling links */

/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0; background-color:#f0f0f0; min-width:100%; width:100%;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table, td{border-collapse:collapse !important; mso-table-lspace:0pt; mso-table-rspace:0pt;}
#bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
#bodyCell{padding:0px;}
#templateContainer{width:600px;}

/* /\/\/\/\/\/\/\/\/ DESKTOP STYLES /\/\/\/\/\/\/\/\/ */

.button2:hover {
background-color: #394c85 !important;
color: #ffffff !important;
border: #394c85 !important;
cursor: pointer !important;
-webkit-transition-duration: 0.2s; /* Safari */
transition-duration: 0.2s;
}

/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */

@media screen and (max-width: 480px){

/* ======== WIDTH RESIZING STYLES ======== */

table[class="emailwrapto100pc"], img[class="emailwrapto100pc"]{
width:100% !important;
height:auto !important;
}

table[class="emailwrapto95pc"], img[class="emailwrapto95pc"]{
width:95% !important;
height:auto !important;
}

table[class="emailwrapto80pc"], img[class="emailwrapto80pc"]{
width:80% !important;
height:auto !important;
}

table[class="emailwrapto60pc"], img[class="emailwrapto60pc"]{
width:60% !important;
height:auto !important;
}

table[class="emailwrapto40pc"], img[class="emailwrapto40pc"]{
width:40% !important;
height:auto !important;
}

table[class="emailwrapto10pc"], img[class="emailwrapto10pc"]{
width:10% !important;
height:auto !important;
}

table[class="emailwrapto3pc"], img[class="emailwrapto3pc"]{
width:3% !important;
height:auto !important;
}

/* ======== PUT BODY STYLES HERE ======== */

.button[class="button"]{
font-family: helvetica, sans-serif, arial !important;
font-size: 20px !important;
padding: 10px 0 10px 0 !important;
color: #222222 !important;
}

/* ======== HIDE ON MOBILE STYLES ======== */

.none2[class="none2"]{
display:none !important;
}

}

</style>

</head>

<body style="padding:0; margin:0 auto;-webkit-text-size-adjust:none;-ms-text-size-adjust:100%;" bgcolor="#f0f0f0">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="emailwrapto100pc" bgcolor="#f0f0f0">
<tr>
<td align="center" valign="top">

<!--preview text-->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="none2" bgcolor="#f0f0f0">
<tr>
<td style="font-family: helvetica, arial, sans-serif; font-size: 1px; line-height: 1px; color: #f0f0f0">Preview Text</td>
</tr>
</table>
<!--preview text-->

<!--spacer begins-->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="emailwrapto100pc" bgcolor="#f0f0f0">
<tr>
<td height="15" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px;"> </td>
</tr>
<tr>
<td height="10" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px;" class="none2"> </td>
</tr>
</table>
<!--spacer ends-->

<!--border top begins-->
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0" class="emailwrapto95pc" bgcolor="#f0f0f0">
<tr>
<td height="2" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px;background-color:#cccccc" class="emailwrapto100pc"> </td>
</tr>
</table>
<!--border top ends-->

<!--content begins-->
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f0f0f0" class="emailwrapto95pc">
<tr>
<td width="2" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px;background-color:#cccccc"> </td>
<td width="20" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px" class="none2"> </td>
<td width="10" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px"> </td>

<td align="center" valign="top">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f0f0f0" class="emailwrapto100pc">
<tr>
<td align="center">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f0f0f0">
<tr>
<td height="15" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px;"> </td>
</tr>
<tr>
<td height="10" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px;" class="none2"> </td>
</tr>
</table>
</td>
</tr>
<!--button begins-->
<tr>
<td align="center">
<table width="430" border="0" align="center" cellpadding="0" cellspacing="0" class="emailwrapto100pc">
<tr>
<td align="center" class="stack">
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0" class="emailwrapto100pc" bgcolor="#f0f0f0">
<tr>
<td align="center" class="button">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="70%" stroke="f" fillcolor="#030505" class="button">
<w:anchorlock/>
<center style="color:#ffffff;font-family:arial, helvetica, sans-serif;font-size:14px;font-weight:bold;" class="button">SHOP NOW</center>
/v:roundrect
<![endif]-->
<!--[if !mso]> <!-->
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="45" align="center" bgcolor="#030505" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold;"><a style="text-transform:none; font-weight:bold; text-decoration:none; display:block; height:45px; text-align:center; vertical-align:middle !important; line-height:45px !important; font-family:Arial, Helvetica, sans-serif;font-size:14px; text-transform:none; font-weight:bold; border:1px solid #030505; background-color:#030505; color:#ffffff" href="#" target="_blank" class="button2">SHOP NOW</a></td>
</tr>
</table>
<!-- <![endif]-->
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--button ends-->
<tr>
<td height="30" style="font-family: helvetica, arial, sans-serif; font-size: 1px; line-height: 1px;"> </td>
</tr>
</table>
</td>
<td width="20" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px" class="none2"> </td>
<td width="10" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px"> </td>
<td width="2" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px;background-color:#cccccc"> </td>
</tr>
</table>
<!--content ends-->

<!--border bottom begins-->
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0" class="emailwrapto95pc" bgcolor="#f0f0f0">
<tr>
<td height="2" style="font-family:arial,helvetica,sans-serif;font-size:1px;line-height:1px;background-color:#cccccc"> </td>
</tr>
</table>
<!--border bottom ends-->

<!--border bottom begins-->
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0" class="emailwrapto95pc" bgcolor="#f0f0f0">
<tr>
<td height="30" style="font-family: helvetica, arial, sans-serif; font-size: 1px; line-height: 1px;"> </td>
</tr>
</table>
<!--border bottom ends-->

<!--body ends-->

</td>
</tr>
</table>

</body>
</html>