Create HTML button with slop using CSS

Lets go!

 <style>  
.content {position: fixed; top: 50;width: 100%;padding: 20px;}
 .outer {position: relative;height: 50px;width: 250px;text-align: center;line-height: 50px;color: white;font-family: Avenir-heavy; font-size: 20px; cursor: pointer;}  
 .outer:before,.outer:after {position: absolute; content: ''; top: 0px;height: 100%; width: 55%; background: none rgb(72, 216, 227); z-index: -1;}  
 .outer:before {left: 0px;border-radius: 0px;border-right: none;transform-origin: top left;border-top-left-radius: 25px;}  
 .outer:after {right: 0px;border-bottom-right-radius: 25px;border-left: none;}  
 </style>  
 <div class="content" id='content'>  
  <center><div class='outer' onclick="LetsGo()">Lets go!</div></center>  
 </div>