Untitled

dabblet.css

/*NOTE: using prefix-free for readable css*/
body
{
	background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,0.98) 62%,rgba(78,124,167,0.98) 62%,rgba(82,129,172,0.98) 68%,rgba(110,169,215,0.98) 100%);
	height: 768px;
}
.ball
{
	width: 194px;
	height: 194px;
	border-radius: 50%;
	position: relative;
	margin: 0px auto;
	top: 319px;
	z-index: 10;
	font-family: arial;
	background-color: #FFFFFF;
	background-image: radial-gradient(50% 38%, circle cover, rgba(255, 255, 255, 0), rgba(77, 77, 77, 0) -12%,rgba(77, 77, 77, 0.9) 71%,rgba(77, 77, 77, 0.7) 76%); /*transition:all 2s ease;*/
}
.highlight
{
	position: relative;
	background: #e0e0e0;
	background: linear-gradient(top,  #CFCFCF 30%,#f7f7f7 100%);
	box-shadow: /*inset 0px -3px 5px 3px #FFFFFF,*/ 1px 2px 1px #F8F8F8;
	width: 63%;
	height: 30%;
	margin: 10px auto;
	top: 8px; /*	border-radius: 90% 90% 80% 80%;*/
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.shadow
{
	width: 164px;
	height: 0px;
	background: rgba(0,0,0,0.3);
	position: relative;
	margin: 0 auto;
	top: 375px;
	z-index: 9;
	border-radius: 50% 50% 50% 50%/ 20% 20% 20% 10%;
	box-shadow: 0px 0px 20px 14px rgba(0,0,0,0.4);
}


.btnCont
{
	width: 185px;
	height: 56px;
	position: relative;
	margin: 0 auto;
	top: 454px;
	text-decoration:none;
	cursor:pointer;
}
.btn
{
	width: 185px;
	height: 56px;
	position: relative;
	background-color: #EEEEEE;
	border-radius: 4px;
	box-shadow: 0px 10px 0px 0px #A8A8A8, 0px 14px 2px 3px #436482, 0px 16px 1px 4px #88B5D9;
	transform: perspective(370px) rotateX(40deg);
}
.btn .txtLogo
{
	text-shadow: 0px -1px -1px #5c463e,1px 0px 1px #FFFFFF;
	color: #9D9C9C;
	position: absolute;
	bottom: -2px;
	left: 30px;
	font-size: 31px;
	font-family: arial;
}

.logo
{
	position: absolute;
	border: 0 solid transparent;
	border-top: 3px solid #66A5E2;
	border-left: 3px solid #66A5E2;
	border-radius: 8px 0px 0px 0px;
	top: -11px;
	right: -9px;
	width: 5px;
	height: 4px;
	transform: rotate(-10deg);
}

.logo .logo
{
	top: -5px;
	left: 8px;
	transform: rotate(60deg);
}

.logo:after
{
	content: "";
	position: absolute;
	background-color: #66A5E2;
	border-radius: 50%;
	top: 5px;
	right: 1px;
	width: 4px;
	height: 4px;
}

.btnCont:active
{
	top: 464px;
	transition: all 0.2s ease;
}

.btnCont:active .btn
{
	box-shadow: 0px 2px 0px 0px #A8A8A8, 0px 2px 2px 3px #436482, 0px 4px 1px 4px #88B5D9;
	transition: all 0.2s ease;
}

.scene:active .ball, .scene:active .shadow
{
	opacity:0;
	transition: all 0.8s ease-in-out;
}

dabblet.html

<div class="scene">
	<div class="ball">
		<div class="highlight" ></div>
	</div>
	<div class="shadow"></div>

	<div class="btnCont">
		<div class="btn">
			<div class="txtLogo">netcraft
				<div class="logo">
					<div class="logo">
						<div class="logo">
							<div class="logo">
								<div class="logo">
									<div class="logo">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</div>

settings.json

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