Untitled

dabblet.css

.button
{
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-50px;
    margin-left:-150px;
    height:100px;
    width:auto;
    padding-left:40px;
    padding-right:40px;
    background-image: linear-gradient(top, #2b68c4 1%,#77d4ff 49%,#77d4ff 71%,#96bee2 100%);
    border-radius: 450px;
    box-shadow: 0 0.07em 0.1em rgba(0,0,0,0.4), inset 0 0 0.1em #77d4ff;
    text-align:center;
    cursor:pointer;
    display: block;
    z-index:1;
    font-size:5em;
    font-family:arial;
    text-align:center;
    color:#071a71;
    text-shadow: 0.03em 0.03em rgba(255,255,255,0.6);
}

.button::after
{
    content: "";
    position:absolute;
    width:86%;
    height:30%;
    background-image:linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(224,224,224,0.2) 70%,rgba(224,224,224,0.2) 100%);       
    box-shadow: inset 0 0.04em 0.002em rgba(255,255,255,0.2);
    border-top-left-radius:2em;    
    border-top-right-radius:2em;    
    border-bottom-right-radius:1em;    
    border-bottom-left-radius:1em;
    left:50%;
    margin-left:-43%;
    margin-top:8%;
    z-index:2;
} 
    
.button::before{
    content: "";
    position:absolute;
    width:86%;
    height:48%;
    background-image:radial-gradient(center, ellipse cover, rgba(155,239,234,0.4) 0%,rgba(155,239,234,0.4) 30%,rgba(255,255,255,0) 70%);
    left:50%;
    top:50%;
    margin-left:-43%;
    margin-top:-8%;
    z-index:1;
}

dabblet.html

<div class="button">Button</div>

settings.json

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