Задать переходящий цвет буквам

h1 { 
  font-size: 72px; 
  background: -webkit-linear-gradient(#e74c3c 49%, #c0392b 50%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
span{ 
  background: -webkit-linear-gradient(#ff7675 49%, #c0392b 50%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
}

<h1>В ЛЕ<span>ТО</span></h1>

span { 
  font-family: Helvetica; 
  font-weight: 900; 
  font-size: 40px; 
} 
 
.parent { 
  position: relative; 
} 
 
.parent p { 
  position: absolute; 
  top: 0; 
} 
 
p:first-child { 
  color: red; 
  z-index: 5; 
} 
 
p.blue { 
  overflow: hidden; 
  top: -20px; 
  z-index: 10; 
} 
 
p:last-child span { 
  display: block; 
  color: blue; 
  transform: translateY(20px); 
}

<div class="parent"> 
  <p><span>Hei man</span></p> 
  <p class="blue"><span>Hei man</span></p> 
</div>

#resources { 
  width:0; 
  height:0; 
  overflow:hidden; 
} 
 
button { 
  display: inline-block; 
  background-color: #fea857; 
  border: 8px solid; 
  box-sizing: border-box; 
  text-align: center; 
  font-size: 30px; 
  border-color: #fedca2 #fec885 #db8646 #db8646; 
  cursor:pointer; 
} 
 
button svg { 
  display: block; 
  margin: auto; 
  width: 200px; 
  height: 40px; 
} 
 
button text { 
  font-family:sans-serif; 
  text-transform: uppercase; 
  font-weight: 900; 
  text-anchor: middle; 
  fill: url(#gradient); 
}

<svg id="resources"> 
  <defs> 
    <linearGradient id="gradient" x1="0%" y1="0" x2="0%" y2="100%" gradientUnits="objectBoundingBox"> 
      <stop offset="50%" stop-color="#f83618" /> 
      <stop offset="50%" stop-color="#ac1e12" /> 
    </linearGradient> 
  </defs> 
</svg> 
 
<button> 
  <svg>     
    <text x="100" y="30">в лето</text> 
  </svg> 
</button>