Untitled

dabblet.css

.button
{
	display: inline-block;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-50px;
    margin-left:-150px;
    height:auto;
    width:auto;
    padding: 0.1em 0.7em 0.1em 0.7em;
    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, inset 0 0 2em rgba(255,255,255,0);
    text-align:center;
    cursor:pointer;
    display: block;
    z-index:1;
    font-size:3em;
    font-family:"Lucida Grande";
    text-align:center;
    color:#071a71;
    text-shadow: 0.03em 0.03em 0.02em rgba(255,255,255,0.6);
    transition: all 1s ease-out;
}

.button:active {
	margin-top: -45px;
}

.button:hover {
	animation: glow 1.0s alternate ease-in-out infinite;
}

@keyframes glow {
	from { box-shadow: 0 0.07em 0.1em rgba(0,0,0,0.4), inset 0 0 2em rgba(255,255,255,0.15);}
	to { box-shadow: 0 0.07em 0.1em rgba(0,0,0,0.4), inset 0 0 2em rgba(255,255,255,0.85);}
}

.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.01) 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:0.01em;
    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

<a class="button">Annulla</a>

settings.json

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