Playing with border-radius, csssecrets and http://simurai.com/archive/buttons/#flexibility. See the result at http://dabblet.com/gist/04e252b3d03a24c4f13d0278362a6bc8

dabblet.css

/**
 * Playing with border-radius, csssecrets and http://simurai.com/archive/buttons/#flexibility. See the result at http://dabblet.com/gist/04e252b3d03a24c4f13d0278362a6bc8
 */
body {
  background-color: #efefef;
}
button{
  color: #204645;
  text-shadow: rgba(255,255,255,.5) 0 1px 0;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;  
  user-select: none;
  background-color: rgba(203, 231, 230, .8);
  border-radius: 8px; 
  border-radius: 30% 10% 30% 30% / 100%;
  height: 3em;
  padding: 0 1em;
  position: relative;
  box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(178, 37%, 35%) 0 .1em 3px, hsl(178, 37%, 35%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px;
}
button:before { content: attr(data-icon); }
button::after, button::after {
    content: "";
    position: absolute;
    width:85%;
    height: 60%;
    top: 0px;
    left: 15%;
    background-image: -webkit-gradient(linear, 0% 0, 100% 0, from(rgba(255, 255, 255, 0.55)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.8, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)));
    border-radius: 0.5em 0.5em 1em 2em 1em 2em;
    border-radius: 0% 0% 0% 50% / 100%;
}

dabblet.html

<button data-icon="☕ ">Give me a break</button>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}