css Question posted in
Some basic documentation can be found here.

Css – How to Show a Hidden Label When Hovering Over a Button?

We all know you can change the colour of a button when you hover over it in CSS alone.

But, what would I do to make a label within it show up when I hover over it?

Effectively, my button just has an icon/image in it when it is in normal mode. But, when the user hovers over the button it will show a text label as well.

I realise you can put a title into the button with gives a text description of what the button does, but can you put a label into a button when you hover over it?

Is that a good idea, or should I just stick to using title?

Ie, here is my button in normal state:

<button>
    <img src="./images/iconok.png" alt="Submit" />
    <label style="display: none">&nbsp;Submit</label>
</button>

and in my hovered state

<button>
    <img src="./images/iconok.png" alt="Submit" />
    <label style="display: inline-block">&nbsp;Submit</label>
</button>

How do I implement this?

Note: When the button is not being hovered over, I do not want any space being allocated to the label at all, as if it was not even there.

EDIT: I have made a mistake in my original question that affected the answer. I had display: block; on my label, which caused the label to appear below the image, but should have been display: inline-block; to make it appear at the side.

Tags:

3

Answers


  1. 0
    • Use visibility: hidden to prevent the label from taking up any
      space when hidden.
    • And visibility: visible with :hover pseudo-selector to display it on hover of button inside button.
    Login or Signup to reply.
  2. 0

    Your question is little bit confusing, but is this what you wanted?:

    HTML:

    <button>
    <img src="./images/iconok.png" alt="Submit" />
    <label class="btn-label">&nbsp;Submit</label>
</button>

    CSS:

    .btn-label {
  display: none;
}

button:hover .btn-label {
  display: inline-block;
}
    Login or Signup to reply.
  3. 0

    This is how you can show a hidden label when the user is hovering around the button.
    There are 2 sumbit buttons because there is one for the image alt (you can’t display the image here, and one for label after you hover on the button.

    function ShowSubmitButton() {
  document.getElementById("submit").style.display = "block"
}
    #submit {
  display: none;
}
    <button>
<img src="./images/iconok.png" alt="Submit" onmouseover="ShowSubmitButton()">
<!--There are two submits because the top one is from the alt of the img-->
    <label id="submit">&nbsp;Submit</label>
</button>

    But I wouldn’t suggest you to use that. Instead, I would like to give you a better code here:

    function ShowSubmitButton() {
  document.getElementById("submit").style.display = "block"
}
    #submit {
  display: none;
}
    <img src="./images/iconok.png" alt="Submit" onmouseover="ShowSubmitButton()"><!--This "submit" is from alt-->
<button id="submit">
    <label>&nbsp;Submit</label>
</button>

    Explaination

    I am using JavaScript to modify the button’s style> property through an addEventListener method. However, in this instance, I didn’t use addEventListener because you can also set it directly within the HTML element’s attributes.

    As an alternative approach, you could reverse the logic by applying display: none when the button is not being hovered over. This will hide the submit button when it’s not active. If you choose to implement this, you’ll need to add a container around the button because when you are hovering on that image, you will not be able to click the submit button at the same time. Just please let me know if you need help with this setup.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search