I am trying to create a unique transparent button with an icon or text inside, that changes its appearance on hover by making the text transparent and the background colored. Here is a snippet of my code:
.button-color {
padding: 12px 20px;
border: none;
color: red;
background-color: transparent;
}
.button-color:hover {
color: transparent;
background-color: red;
}<button class="button-color">Hi!</button>(The actual code is more extensive but this illustrates the concept) And here is how it looks:
Unhovered:
https://i.sstatic.net/2gPqH.png
Hovered:
https://i.sstatic.net/UHWSt.png
I would like the background to remain transparent where the icon is located. Considering the buttons are within a 3D viewer with a loaded model, simply setting the icon to a specific color won't resolve the issue. I'm uncertain if achieving this effect solely with CSS is possible, but one can hope.