0

I need to make this button change to background-color #838383 when users hover their mouse pointer over it, I've tried lots of things but can't get it to work.

<table width="60%">
  <tbody>
    <tr>
      <td width="130PX" style="text-align: left;">
        <a style="padding: 10px 35px; background-color: #ff0000; color: #fff; text-transform: uppercase; letter-spacing: -.2px; text-decoration: none; font-family: helvetica,arial,sans-serif; border-radius: 20px; font-size: 12px;"
          href="mailto:123456@abcdef.com?subject=Subject">EMAIL US</a>
      </td>
      <td>
        <b>Bla bla bla</b><br>
        Bla bla bla..
      </td>
    </tr>
  </tbody>
</table>
Marcos Dimitrio
  • 6,651
  • 5
  • 38
  • 62

1 Answers1

1

You should use a class on your <a> tag and add a style for the hover event.

https://jsfiddle.net/yLkr9as0/

<style>
  .mylink {
    padding: 10px 35px;
    background-color: #ff0000; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: -.2px; 
    text-decoration: none; 
    font-family: helvetica,arial,sans-serif; 
    border-radius: 20px; 
    font-size: 12px;
  }

  .mylink:hover  {
    background-color: blue;
  }
</style>

<table width="60%">
  <tbody>
    <tr>
      <td width="130PX" style="text-align: LEFT;">
        <a class="mylink" href="mailto:123456@abcdef.com?subject=Subject">EMAIL US</a>
      </td>
      <td>
        <b>Bla bla bla</b>
        <br>
        Bla bla bla..
      </td>
    </tr>
  </tbody>
</table>
alebruck
  • 434
  • 1
  • 8
  • 15
  • 1
    Thanks alebruck - The only problem is I don't have access to CSS, some third party company charges a thousand bucks a second for any CSS changes so I'm trying to HTML my way around it. – Qhdc Australia May 18 '15 at 02:54
  • You have some options to do that, they're all described here http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css – alebruck May 18 '15 at 03:03
  • If you can change HTML you can add this code inside a ` – alebruck May 18 '15 at 03:05