0

Bueno mi pregunta es un tanto complicada, lo que quiero es saber si se puede hacer transparente el texto de un boton pero tambien el boton en la parte donde hay texto para que cuando paso el mouse por arriba del boton las letras sean del color o imagen que hay en el div sobre el que esta el boton espero me entiendan.

2 respuestas 2

2

Para hacer que las letras tengan transparencias se utiliza rgba por ejemplo:

#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 */
}
1

Si lo entendi, quieres que la imagen por debajo del botón se pueda ver a traves de las letras, no?

Hay algunas formas de lograrlo, pero lo cierto es que no hay una opción mejor para esto, ya que son propiedades muy experimentales de CSS y puede que no funcionen bien en todos lo navegadores.

Forma 1

Las propiedades:

color: rgba(0,0,0,0);
-webkit-background-clip: text;

Como ves por el prefijo -webkit- esto solo funciona en navegadores, que trabajen con este motor. La otra es que solo funciona en el fondo del mismo elemento.

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>


Opción2

Usando la propiedad:

mix-blend-mode: screen;

o

mix-blend-mode: multiply;

El primero, transparenta todo lo que sea negro y el segundo lo que sea blanco, pero si usas otro color, no se verá el efecto que tal vez deseas.

Otro problema con esta técnica, es que el fondo lo debe tener el padre contenedor, o los elementos por "debajo" de los botones.

Ejemplo:

.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>

Opción 2b

Hay una forma de lograr el mismo efecto, pero con un solo elemento de botón y sin depender de otro elemento por debajo, pero es una técnica más compleja y lo podemos lograr apoyándonos de los pseudo-elementos, ::after y ::before, así:

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>

¿Era esto lo que querías lograr? Cualquier duda usa la caja de comentarios.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.