Clever Geek Handbook

HTML Button Tag Style

I am using an HTML button tag, but the style mentioned below should only be applied to the top menu and not to other button tags on the site. I tried using the code button.menuButton:hover

but it doesn't 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 style below, which will show the bottom border, since the ridge is in lime color and the rest of the sides will be in dotted mode.

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

Any help is greatly appreciated.

+3


source to share


2 answers


If you only want the style to apply to certain buttons, you must only specify the class in those button tags. for example:
This is the class of buttons:

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

And when declaring a 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 be styled:

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


source


If you want to use button.menuButton:hover

, then your button will need the .menuButton class.

<button [...] class="menuButton">


In CSS, a period (.) Indicates that you are referencing a class name on an element.

0


source






More articles:


All Articles