Q:

HTML Email - swapping button

this specifically relates to HTML emails.  So I can create a button like so
<table border="0" cellpadding="0" cellspacing="0" class="emailButton" style="border-radius:3px; background-color:#6DC6DD;">
    <tr>
        <td align="center" valign="middle" class="emailButtonContent" style="padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
            <a href="..." target="_blank" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a>
        </td>
    </tr>
</table>

Then within a media query, I can do things to alter this button for mobile (including changing the text)
@media only screen and (max-width: 480px){
    .emailButton{
        max-width:600px !important;
        width:100% !important;
        content: 'new text';
    }

    .emailButton a{
        display:block !important;
        font-size:18px !important;
    }
}

My question is, would there be any way to change the buttons anchor link?  On mobile, I need to link them to a different page, and I wanted to see the best way to do this.
Thanks

A:

I'n 95% certain that you cannot use JS inside an email. So what you can do is create a separate button for mobile and only display it when at screen sizes of 480 or less. 
I've added a second media query which will ensure that non-mobile is displayed at sizes > 480px and the mobile is hidden. 

 
@media only screen and (min-width: 481px) {
   #notmobile {
    display: block;
  }
  
  #ismobile {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .emailButton {
    max-width: 600px !important;
    width: 100% !important;
    content: 'new text';
  }
  #notmobile {
    display: none;
  }

  .emailButton a #ismobile {
    font-size: 18px !important;
  }
}
<table border="0" cellpadding="0" cellspacing="0" class="emailButton" style="border-radius:3px; background-color:#6DC6DD;">
    <tr>
        <td align="center" valign="middle" class="emailButtonContent" style="padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
           
          <a href="..." target="_blank" id="notmobile" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a>
          
            <a href="..." target="_blank" id="ismobile" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now Mobile</a>
        </td>
    </tr>
</table>

Code Snippet won't work
Here is a live demo of the below code, just resize your browser window. 
http://codepen.io/anon/pen/GJYXLa

