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: 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.