JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
		<defs>
			<linearGradient id="textgradient-green" x1="0%" x2="0%" y1="0%" y2="100%">  
			    <stop stop-color="#005200" offset="0%"/>  
			    <stop stop-color="#002400" offset="100%"/>  
			</linearGradient>  
			<linearGradient id="textgradient-yellow" x1="0%" x2="0%" y1="0%" y2="100%">  
			    <stop stop-color="#fffc00" offset="0%"/>  
			    <stop stop-color="#e1a400" offset="100%"/>  
			</linearGradient> 
		</defs>
	</svg>
  
  <div class="btn-green popup">
  <svg>
  <text x="0" y="50%">Заказать звонок</text>
  </svg>
  </div>

CSS

.btn-green {
    cursor: pointer;
    display: inline-block;
    padding: 0 30px;
    height: 44px;
    line-height: 40px;
    font-size: 30px;
    font-family: Arial;
    color: #002700;
    border-radius: 22px;
    -webkit-text-shadow: 0 1px 0 hsla(0, 100%, 100%, .45);
    text-shadow: 0 1px 0 hsla(0, 100%, 100%, .45);
    background: #003100;
    background: -webkit-linear-gradient(to bottom, #5fb914, #004a1a);
    background: -moz-linear-gradient(to bottom, #5fb914, #004a1a);
    background: -o-linear-gradient(to bottom, #5fb914, #004a1a);
    background: -ms-linear-gradient(to bottom, #5fb914, #004a1a);
    background: linear-gradient(to bottom, #5fb914, #004a1a);
    box-shadow: 0 0 13px fadeout(#ffffbc, 16%) inset;
}
    .btn-green svg {
        position: static;
        display: block;
        width: 100%;
        height: 100%;
        /* fill: url(#textgradient-yellow); */
    }
    .btn-green svg text {
        line-height: 40px;
        font-size: 30px;
        font-family: Arial;
        color: #002700;
        
    }