salmon & blue circle - radial gradient

dabblet.css

/**
 * salmon & blue circle
 */

button {
    color:#fff;
    font-family:helvetica neue;
    font-size:48px;
    font-style:italic;
    font-weight:100;
    letter-spacing:10px;
    text-transform:uppercase;
    border:1px outset #eee;
    border-radius:500px;
    box-shadow:10px 5px 20px #bbb, -1px -1px 2px #eee;
    background:radial-gradient(80px 80px, #ff555d 50px, #40B8ED 40%, #40B3ED 45%, #000 85%); 
    width:500px;
    height:500px;
    position:absolute;
    top:10%;
    left:15%;
}

​.dumb {
	padding:20px;
}

.dumb:hover {
    animation:shake 1s linear;
}

@keyframes "shake" {
    	0%	{ padding:9px; }
	33%	{ padding:11px; }
	66%	{ padding:9px; }
	100%	{ padding:10px: }
}
    

dabblet.html

<p class="dumb">bullshit up here</p>

<button><span>Hello world!</span></button>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}