CODEWITHSUNDEEP
buttonmouseoverbackground-color
Qhdc Australia
Qhdc Australia

Reputation: 3

HTML Mouseover Button Color Change

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:[email protected]?subject=Subject">EMAIL US</a>
      </td>
      <td>
        <b>Bla bla bla</b><br>
        Bla bla bla..
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 4570

Answers (1)

alebruck
alebruck

Reputation: 434

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:[email protected]?subject=Subject">EMAIL US</a>
      </td>
      <td>
        <b>Bla bla bla</b>
        <br>
        Bla bla bla..
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions