How to make text inside a button transparent on hover? background should remain the same though

问题

How can one make the text inside a button transparent on hover? the background should remain the same though. I tried opacity:0; but it made the whole button invisible. Help. I tried the below code.

<style>
.btn:hover {
    background-color: #ededed !important;
    color: #3c3c3c !important;
    opacity:0;
}
</style>

<button class=" btn btn-success  btn-lg">test button</button>

回答1:

You need to use an rgba(color,color,color,opacity); for the color rule.

Try this fiddle: https://jsfiddle.net/reala/5xq3mj66/

EDIT: Alright - I think I understand your request.

You want the text to be TRANSLUCENT on hover, (but not invisible, which is 'transparent'), so that you can see the background through the text.

Very similar solution, but change the opacity of rgba to something very low, like 0.3... for example:

.btn:hover {
   color: rgba(0,0,0,0.3);
}

And remember to remove your opacity: 0, or reset it to opacity: 1 - otherwise it will make the entire button transparent. That is not what you want.

来源：https://stackoverflow.com/questions/45308150/how-to-make-text-inside-a-button-transparent-on-hover-background-should-remain