JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blue_button" >
    <div class="blue_glare"></div>
</div>

CSS

#blue_button {
margin-top:20px;
height: 30px; width: 150px; 
border-radius: 16px; 
border: 2px solid #ccc; 
text-align: center; 
background-color: rgba(60, 132, 198, 0.8); 
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9))); 
background-image: -moz-linear-gradient(top, #1c5b9b, #6cbfff); 
border-top-color: #8ba2c1; 
border-right-color: #5890bf; 
border-bottom-color: #4f93ca; 
border-left-color: #768fa5; 
box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; 
float: left;
margin-right: 30px;
}

.blue_glare {
top: 0;
left: 5px;
border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
margin: 0 auto;255
z-index: 10;
}