radiating circle object in one line of html and a few more lines of css

dabblet.css

/**
 * radiating circle object in one line of html and a few more lines of css
 */
body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	display: -webkit-box;
	-webkit-box-align: center;
}

@-webkit-keyframes changeButtonState {
	0%   {
		background: #00264c;
	}

	15%  {
		background: hsla(42, 92%, 79%, 17);
		box-shadow: 
			0 0 0 08px hsla(64, 100%, 91%, 0.8),
			0 0 0 14px hsla(210, 100%, 25%, 3),
			0 0 0 18px hsla(210, 100%, 30%, 4);
	}
	30%  {
		background: hsla(42, 92%, 79%, 17);
		box-shadow: 
			0 0 0 08px hsla(64, 100%, 91%, 0.8),
			0 0 0 14px hsla(64, 100%, 91%, 0.5),
			0 0 0 18px hsla(210, 100%, 30%, 4);
	}
	45% {
		background: hsla(42, 92%, 79%, 17);
		box-shadow: 
			0 0 0 08px hsla(64, 100%, 91%, 0.8),
			0 0 0 14px hsla(64, 100%, 91%, 0.5),
			0 0 0 18px hsla(64, 100%, 91%, 0.2);
	}
	80% {
		background: hsla(42, 92%, 79%, 17);
		box-shadow: 
			0 0 0 08px hsla(64, 100%, 91%, 0.8),
			0 0 0 14px hsla(64, 100%, 91%, 0.5),
			0 0 0 18px hsla(64, 100%, 91%, 0.2);
	}
}

#button {
	height:30px;
	width:30px;
	margin:15% auto 25% auto;
	position:relative;
	background: #00264c;
	border-radius:30px;
	box-shadow:
		0 0 0 08px hsla(210, 100%, 20%, 2),
		0 0 0 14px hsla(210, 100%, 25%, 3),
		0 0 0 18px hsla(210, 100%, 30%, 4);
}

#button:hover {
	cursor: pointer;
	-webkit-animation: changeButtonState 3s infinite;
}

#button:hover:after {
	content:'';
	height:66px;
	width:66px;
	top:-18px;
	left:-18px;
	border-radius:60px;
	position:absolute;
	box-shadow:0 0 20px hsla(0, 0%, 100%, 0.2);
}

dabblet.html

<div id="button"></div>

settings.json

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