You can do it like this using css linear gradients. See below example.
button {
padding: 20px 40px;
font-size: 16px;
color: #FFF;
padding-left: 10px;
border:none;
background: linear-gradient(to right, rgba(255,38,0,1) 0%, rgba(246,41,12,1) 74%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 77%, rgba(255,111,0,1) 78%, rgba(255,111,0,1) 87%, rgba(255,255,255,1) 88%, rgba(255,255,255,1) 89%, rgba(247,255,0,1) 93%, rgba(247,255,0,1) 100%);
}
button:focus {
outline:none;
}
<button>Explore</button>
solved Client wants following css button [closed]