Magic button

dabblet.css

/**
 * Magic button
 */
html {
    color: black;
    padding: 5em 0 0 20em;
    background: 
    	radial-gradient(100% 50%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),
  		radial-gradient(0% 50%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px;
	background-color: slategray;
	background-size:75px 100px;
}

.magicButton {
    box-shadow: inset 0 -20px 0 0 rgba(255,255,0,0.5);
    white-space: nowrap;
    border: 20px solid transparent;
    border-bottom: 0;
    border-radius: 20px;
    padding: 15px 2em 35px;
    background-clip: padding-box, border-box, border-box, border-box;
    background-image: linear-gradient(rgba(255,0,0,0.5) 20px, rgba(0,255,0,0.5)),
    	linear-gradient(rgba(0,0,255,0.5) 20px, rgba(255,255,0,0.5) 80%),
    	linear-gradient(rgba(0,0,255,0.5) 20px, rgba(255,255,0,0.5) 80%),
    	linear-gradient(rgba(0,0,255,0.5), rgba(0,0,255,0.5));
    background-size: 100% 100%,
    	20px 100%,
    	20px 100%,
    	100% 20px,
    	100% 20px;
    background-repeat: no-repeat;
    background-origin: padding-box, border-box, border-box, padding-box;
    background-position: 0 -20px,
    	0 0,
    	100% 0,
    	0 -20px
}

dabblet.html

<span class="magicButton">I am a button!</span>

settings.json

{"view":"separate","seethrough":"1","prefixfree":"1","page":"css"}