2

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>
Austen Holland
  • 1,828
  • 1
  • 15
  • 24
Vipul Tyagi
  • 83
  • 1
  • 10
  • I think you can use `color: rgba(255,255,255,0)` – derHugo Jul 25 '17 at 16:00
  • I tried it but it makes the whole block white instead. let me clarify that Succes button has green color so I want the background of the button to remain green. but I want to make the text of the button transparent so that I can see my background image as texts background color. – Vipul Tyagi Jul 25 '17 at 16:09
  • I totally understand what you want. But I wonder why rgba on the color attribute should not... It should only apply to the color attribute so the text .. why does your whole block get white? And rgba use the alpha channel with 0 so it should get transparent ... what browser are you using? – derHugo Jul 25 '17 at 16:25
  • https://stackoverflow.com/a/10835846/7111561 – derHugo Jul 25 '17 at 16:26
  • I'm using Chrome. Tried it on Firefox and Opera also. still, the issue ain't resolved. – Vipul Tyagi Jul 25 '17 at 17:16

1 Answers1

4

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.

bruh
  • 2,205
  • 7
  • 30
  • 42
  • I tried each and everything you advised but still not able to solve the problem. The text color becomes transparent but it does not show the background image(My website's main background image ) through it. instead, it becomes a block of whatever specified color the buttons background color is. For example. My buttons background is "green", my page background is a "blue colored image". So it should show the "blue colored image through" the text on hover. not the buttons background color i.e. "green". Hope you understand now what I'm trying to say. – Vipul Tyagi Jul 25 '17 at 17:13
  • 1
    @VipulTyagi it sounds like you are trying to create a "hole" in the shape of your "button text" *through* your button... to reveal your "blue background", on hover, only in the text area of the button. I don't think this is possible because the "button text" is a child of the "button", and not a direct child of your "main background". When you lower the 'transparency' of your button text color, it will reveal whatever is "behind" it. In your case, that is its parent, the "button". So lowering the transparency will rightfully show green, instead of blue. – bruh Jul 25 '17 at 18:32
  • If you check this updated fiddle, you may get a few ideas about how to be creative. This example, has the 'button' becoming transparent, to reveal the blue, while the text is still visible. That may not be what you want - but a step in the right direction. Your best bet may be to look into using a "css image mask" for your text (you'll have to look that up), and pretend it is transparent by using an "image" as your text color. Here is the fiddle I was referring to https://jsfiddle.net/reala/5xq3mj66/6/ – bruh Jul 25 '17 at 19:15
  • OK. I got it. Thanks a lot for the help. :) Would love to learn more from you guys. – Vipul Tyagi Jul 26 '17 at 06:50