Well, my question is somewhat complicated, what I want to know is whether the text of a button can be made transparent but also the button on the part where there is text so that when I mouse over the button the letters are from the color or image that is in the div on which this button I hope you understand me.
If I understood, you want the image below the button to be visible through the letters, right?
There are some ways to achieve this, but the truth is that there is no better option for this, since they are very experimental properties of CSS and may not work well in all browsers.
The properties:
color: rgba(0,0,0,0);
-webkit-background-clip: text;
As you see by the prefix -webkit- this only works in browsers that work with this engine. The other is that it only works in the background of the same element.
button{
background-image: url('http://picsum.photos/800/600');
background-size: cover;
background-position: center;
background-color: darkcyan;
color: rgba(0,0,0,0);
font-family: impact;
font-size: 1.5em;
-webkit-background-clip: text;
}<button>
TEXTO CON FONDO TRANSPARENTE
</button>Using the property:
mix-blend-mode: screen;
or
mix-blend-mode: multiply;
The first, transparent everything that is black and the second what is white, but if you use another color, you will not see the effect you may want.
Another problem with this technique is that the fund must have the parent container, or the elements "below" the buttons.
Example:
.fondo{
min-height: 50vh;
background-image: url('http://picsum.photos/1200/600');
background-size: cover;
background-position: center;
padding: 1em;
}
button::before{
content: attr(class)' ';
}
button{
font-family: impact;
font-size: 7vmin;
padding: 0.5em 1em;
display: inline-block;
text-transform: uppercase;
}
.screen{
background-color: white;
color: black;
mix-blend-mode: screen;
}
.multiply{
background-color: black;
color: white;
mix-blend-mode: multiply;
}
.red{
background-color: red;
}<div class="fondo" >
<button class="multiply">button </button>
<button class="screen">button </button>
<button class="multiply red">button </button>
<button class="screen red">button </button>
</div> There is a way to achieve the same effect, but with a single button element and without relying on another element underneath, but it is a more complex technique and we can achieve it by relying on the pseudo-elements, ::after and ::before , like this:
button::before{
content: attr(class)' ';
}
button::after{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://picsum.photos/1200/600');
background-size: cover;
background-position: center;
}
button{
font-family: impact;
font-size: 7vmin;
padding: 0.5em 1em;
display: inline-block;
text-transform: uppercase;
position: relative;
}
.screen{
background-color: white;
color: black;
}
.screen::after{
mix-blend-mode: screen;
}
.multiply{
background-color: black;
color: white;
}
.multiply::after{
mix-blend-mode: multiply;
}
.red{
background-color: red;
}<button class="multiply">button </button>
<button class="screen">button </button>
<button class="multiply red">button </button>
<button class="screen red">button </button>Was this what you wanted to achieve? Any doubt use the comment box.
To make the letters have transparencies, rgba is used, for example:
#id-boton{
color: rgba(0, 0, 0, 0); /*este es para el texto*/
background: rgba(0, 0, 0, 0); /* y este para el fondo del boton */
}