-1

Okay so i want to make a transparent button with some icon / text inside that, on hover, makes the text transparent and the background colored. This is "kinda" 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 code is way longer but you get the point) And this is the result:

Unhovered:

Unhovered

Hovered:

Hovered

I want the background to get transparent where the icon is. Oh and setting the icon to a certain color won't do the trick because these buttons are inside a 3D viewer that has a model loaded . I don't even know if this is achievable with pure css but who knows.

Alixsep
  • 382
  • 2
  • 3
  • 13
Sebastian Ciocarlan
  • 301
  • 2
  • 11
  • 1
    Please provide a full runnable example with code sandbox or using Stackoverflow snippets. – Abdulrahman Ali Jun 03 '21 at 13:34
  • does not work the way you think iut work. Its logically impossible. Image that you have a black sheet of paper. If you write with a white pencil on it, you have no issue. If you write with transparent ink, you wont see anything then the black sheet of paper. The invisible ink does not make the blacksheet of papaer disappear. Same for the website. Invisible text-color does not make the background disappear. For that you have to work with pseudoelements, SVG or clip-path to actually cut the background away. Alternativly mask it to have it look alike. – tacoshy Jun 03 '21 at 13:34
  • 1
    Eseiast solution would be to use as text-color the grey-color that is used as background for the parent element. – tacoshy Jun 03 '21 at 13:35
  • @tacoshy Okay, any idea is welcomed on how to do it. I'm not against using clip path or something like that. Does exist any way to kinda filter the background? Like in photoshop, thinking of it like layers. – Sebastian Ciocarlan Jun 03 '21 at 13:37
  • @tacoshy Can't do that because of this: [image](https://imgur.com/a/ZiOR5Fb) , it has to be transparent... – Sebastian Ciocarlan Jun 03 '21 at 13:40
  • It is possible but it's not that easy. You can read article [Cutting out the inner part of an element using clip-path](https://css-tricks.com/cutting-inner-part-element-using-clip-path/) by Ana Tudor. When you give up, think of another effect. – Jax-p Jun 03 '21 at 13:41
  • 1
    It is probably doable. But you should post a minimum snippets, a @AbdulrahmanAli says – vals Jun 03 '21 at 13:44
  • @vals Done, its a minimal product but i think we get the idea. – Sebastian Ciocarlan Jun 03 '21 at 13:48
  • Reopened because the answer provided as "duplicate" will only work if the background is an image. and this is not the case of the OP – vals Jun 04 '21 at 06:14

1 Answers1

1

You can get this effect using blend-mode : hard-light as long as the color of the element has RGB values that are 0 or 255. (that is, primary colors).

With this blend-mode, gray (RGB values of 128) is "transparent"

.button-color {
  padding: 12px 20px;
  border: none;
  font-size: 100px;
  color: red;
  background-color: gray;
  mix-blend-mode: hard-light;
  left: 10px;
  top: 10px;
  width: 200px;
}
.button-color:hover {
  color: gray;
  background-color: red;
}

.container {
    background-color: lightgreen;
    width: 200px;
}
<div class="container">
<button class="button-color">Hi!</button>
</div>
vals
  • 61,425
  • 11
  • 89
  • 138