Home / Questions / 30779
Accepted
Francisco Romero
Asked: 2020-10-31 16:11:27 +0800 CST 2020-10-31 16:11:27 +0800 CST

How to respect the diagonal of a button with a text in two colors?

  • 772

I want to make a button with a diagonal background with two colors. In turn, the text that is inside it also has to be split diagonally in the same way as the button, that is, if it splits a letter in half, each of the parts of the letter must be a color.

Here is the CSS I have so far. As you can see, the text is not in two colors, it would have to respect the diagonal of the button's background in two colors:

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

Does anyone know how to fix this with CSS?

css

1 Answers

  1. Best Answer

    This could be fixed by entering the text into a tag, for example, pand then adding another linear-gradientto this tag.

    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: As you have commented @blonfu, the -webkit-background-clip: textand properties -webkit-text-fill-color: transparentare what do the magic. Unfortunately, however, these are not supported for all types of browsers.

    The property that is going to give us the most problems is going to be -webkit-text-fill-colorsince it is not compatible with Internet Explorernor Edge. It will also give us problems with some versions of Firefoxand with versions of Opera Mini.

    I have used caniuse.comto look at the properties compatibility:

    Also add that it is not the same that you use -webkit-linear-gradientthat simply linear-gradient. You can check it by modifying it in the example and seeing that the behavior is not the same.

    • 3