Modifica del colore del testo su 2 lati della linea di sfumatura diagonale in html

Question

Qualche idea su come cambiare il colore del testo per 2 parti della linea sfumatura? Per esempio qui se voglio che la parte blu del testo ('s', 'o' e una parte di 'm') sia nera?

.button{ 
    background: linear-gradient(140deg, #00C9FF 35%, transparent 35%); 
} 

Answer 1

si può fare avvolgendo il testo in un tag <p> e impostando un linear-gradient a questo 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>