1

Quiero realizar un botón con un background en diagonal con dos colores. A su vez, el texto que está dentro de él también tiene que partirse en diagonal de la misma manera que el botón, es decir, si parte alguna letra por la mitad tiene que ser cada una de las partes de la letra de un color.

Aquí os dejo el CSS que tengo hasta ahora. Como veis, el texto no está a dos colores, tendría que respetar la diagonal del background del botón a dos colores:

.button{
       background: linear-gradient(140deg, #00C9FF 35%, transparent 35%);
    }
<button class="button">some long text</button>

¿Alguien sabe como solucionar esto con CSS?

1
  • Esta pregunta es simplemente informativa por si a alguien le puede servir de ayuda. La he basado en la respuesta que dí en el sitio Stackoverflow en inglés en esta pregunta. Commented el 31 oct. 2016 a las 0:16

1 respuesta 1

3

Esto se podría solucionar introduciendo el texto en una etiqueta, como por ejemplo p y después añadiendo otro linear-gradient a esta etiqueta.

button{
   background: linear-gradient(140deg, #00C9FF 35%, transparent 35%);
   color: white;
   font-size: 30px;
}

p{
  margin: 0;
  font-size: 50px;
  background: -webkit-linear-gradient(130deg, red 65%, black 15%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<button type="button"><p>some long text</p></button>

EDIT: Tal y como ha comentado @blonfu, las propiedades -webkit-background-clip: text y -webkit-text-fill-color: transparent son las que hacen la magia. Sin embargo, por desgracia, estas no están soportadas para todo tipo de navegadores.

La propiedad que más problemas nos va a dar va a ser -webkit-text-fill-color ya que no es compatible con Internet Explorer ni Edge. También nos dará problemas con algunas versiones de Firefox y con las versiones de Opera Mini.

He usado caniuse.com para mirar la compatibilidad de las propiedades:

Añadir también que no es lo mismo que uséis -webkit-linear-gradient que simplemente linear-gradient. Podéis comprobarlo modificándolo en el ejemplo y viendo que el comportamiento no es el mismo.

2
  • Interesante, no sabía que podía hacerse eso. Aunque no lo dices en la respuesta las propiedades -webkit-background-clip: text y -webkit-text-fill-color: transparent son necesarias para hacer la magia y no funcionan en IE. En Firefox y Chrome funciona correctamente, supongo que en otros navegadores basados en webkit también. En cualquier caso buen aporte
    – user7176
    Commented el 31 oct. 2016 a las 8:12
  • @blonfu Muchas gracias! Sí, se me olvidó indicar que había que añadir ambas propiedades para que funcionara. La verdad no tengo ni instalado IE en el ordenador, luego en cuanto tenga un rato edito la respuesta indicando la compatibilidad con navegadores. Gracias a ti también por el apunte :) Commented el 31 oct. 2016 a las 8:19

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.