Question

I am using the HTML button tag but the style mentioned below should only apply to the top menu rather than the other button tags in the site. I tried using the code button.menuButton:hover but it does not work

<button id="menuButton" type="button" name="menuButton" title="Logout">
    <img src="images/commonicons/logout.png" alt="Logout" id="imgLogout" /><br /><b>Logout</b>
</button>

and applying the below style which will show the bottom border as ridge with Lime color and rest of the sides will be in dashed mode.

button:hover {
    border: 1px dashed #CCCCCC;
    border-bottom: 2px ridge Lime;
}

Answer 1

If you want the style to be applied to only specific buttons, you should specify a class only in those button tags. for example:
This is the button class:

.mybutton
{
    border: 1px dashed #CCCCCC;
    border-bottom: 2px ridge Lime;
}

And while declaring the button:

This button will have the style :

 <button id="menuButton" type="button" name="menuButton" class="mybutton" title="Logout">
  <img src="images/commonicons/logout.png" alt="Logout" id="imgLogout" /><br       /><b>Logout</b>
</button>

This button will not have the style:

<button id="menuButton" type="button" name="menuButton"title="Logout">
      <img src="images/commonicons/logout.png" alt="Logout" id="imgLogout" /><br       /><b>Logout</b>
    </button>