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"> Submit</label>
</button>
and in my hovered state
<button>
<img src="./images/iconok.png" alt="Submit" />
<label style="display: inline-block"> 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.
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"> Submit</label>
</button>
CSS:
.btn-label {
display: none;
}
button:hover .btn-label {
display: inline-block;
}