Does anyone know how to reproduce this button with css?

Asked Jul 06 '16 at 07:46

Active Jul 06 '16 at 07:51

Viewed 65 times

I would like to create a button that when it is hovered the text become totally transparent, and the font color becomes the background image. I tried with the opacity characteristic but the problem is that the whole button turns transparent not just the text.

Does anyone have the solution?

See image for better understanding -->

Thank you in advance!

edited Jul 06 '16 at 07:51

Sagar Kodte

3,599
4
20
51

asked Jul 06 '16 at 07:46

Daniel

use a png background image and color:Transparent on hover. – Carol McKay Jul 06 '16 at 07:51
1

@CarolMcKay not exactly... Color transparent will show grey text – Marcos Pérez Gude Jul 06 '16 at 07:53
@MarcosPérezGude if that is happening you may also need to state text-shadow:none; – Carol McKay Jul 06 '16 at 07:54
@CarolMcKay no, using a background image (white border and grey background) and text to transparent, the text will be shown with the color of the background. AKA grey. – Marcos Pérez Gude Jul 06 '16 at 07:56
CSS-tricks has posted before [here](https://css-tricks.com/how-to-do-knockout-text/). – Anson Jul 06 '16 at 08:01
1

Where is you code? – PeeHaa Jul 06 '16 at 08:01
1

@PeeHaa your link is webkit only. It's not good solution. – Marcos Pérez Gude Jul 06 '16 at 08:12
@MarcosPérezGude There are several answers on there? And the question *is* an exact dupe? – PeeHaa Jul 06 '16 at 08:57
1

This question is an exact duplicate of another question, the solutions there provide the solution to this as well. – Kyle Jul 06 '16 at 09:06

Does anyone know how to reproduce this button with css?

0 Answers0