salmon & blue circle - bouncing, animated

dabblet.css

/**
 * salmon & blue circle
 */

button {
    color:#ff555d;
    font-family:futura;
    font-size:48px;
    font-style:italic;
    font-weight:800;
    letter-spacing:10px;
    text-transform:uppercase;
    text-shadow:10px 10px 20px #40B8ED, -10px -10px 20px #40B8ED, -10px 10px 20px #40B8ED, 10px -10px 20px #40B8ED;
    border:0px inset #eee;
    border-radius:500px;
    box-shadow:2px 2px 20px #40B3ED, -1px -1px 10px #fff;
    background:linear-gradient(70deg, #ff555d, #ccc);
    /*background:radial-gradient(80px 80px, #ff555d 50px, #40B8ED 40%, #40B3ED 45%, #000 85%);*/
    width:500px;
    height:500px;
    position:absolute;
    top:20px;
    left:15%;
}

button span {
	text-indent:0;
	position:relative;
	top:0;
	left:0;
	display:block;
}

button {
    animation:shake 2.8s ease-in-out infinite;
}

span {
	animation:spanShake 2.8s ease-in-out infinite;
}

@keyframes "shake" {
    0%          { top:20px; }
    25%		{ top:40px; }
    50%		{ top:25px; }
    75%		{ top:40px; }
    100%        { top:20px; }
}

@keyframes "spanShake" {
    0%          { top:0px; }
    25%		{ top:-10px; }
    50%		{ top:-5px; }
    75%		{ top:-10px; }
    100%        { top:0px; }
}
    

dabblet.html

<button><span>infinite mushrooms</span></button>

settings.json

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