Gossmatica button tests

dabblet.css

/**
 * Gossmatica button tests
 */

body { 
	padding: 0; margin: 0;
	font-size: 16px;
	background: black;
	/*background: linear-gradient(270deg, rgba(0,0,0, 0) 0px, rgba(0,0,0, 0) 23px, rgba(255,0,0, 1) 24px),
	            linear-gradient(180deg, rgba(0,0,0, 1) 0px, rgba(0,0,0, 1) 23px, rgba(255,0,0, 1) 24px);/**/
	background-size: 24px 24px
}
#wrapper {
	margin: 0 auto;
	position: relative;
	width: 984px;
}
#logo {
	margin: 1.5em 1.5em 4.5em;
	position: relative;
	display: block; width: 10.5em; height: 10.5em;
	border: 1.5em solid #009fdf;
	background: #ffffff;
}
#logo::before{
	content: "";
	position: absolute; top: 1.5em; left: 1.5em;
	display: block; width: 4.5em; height: 4.5em;
	background: #ffffff;
	border: 1.5em solid #009fdf;
}
#logo::after{
	content: "";
	position: absolute; left: 1.5em; bottom: -4.5em;
	display: block; width: 4.5em; height: 1.5em;
	border: 1.5em solid #009fdf; border-top: none;
	background: #ffffff;
}

ul a {
	font-size: 1.5em;
	position: relative; z-index: 3;
	display: block; height: 2em;
	box-sizing: border-box;
	line-height: 2em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-family: "Geo";
	background: #000000;
	transition: all 0.125s linear 0s;
}
ul {
	margin: 0; padding: 0;
	list-style-type: none;
}
li {
	margin: 1.5em 4.5em;
	display: block; width: 7.5em;
	background: #009fdf;
	transition: box-shadow 0.125s linear 0.125s;
}
li:hover {
	box-shadow: 0px 0px 12px 2px rgba(0,159,223, 0.5);
	transition: box-shadow 0.125s linear;
}
li:hover a{
	transform: translate3d(-2px, -6px, 0) rotate(-3deg);
	transition: all 0.125s linear 0.125s;
}

#content {
	padding: 1.5em;
	position: absolute; top: 0em; right: 1.5em; left: 16.5em;
	background: #fff;
}
h1 {
	margin:0; padding: 0;
	font-size: 2em;
	line-height: 1.5em;
	font-family: "Geo";
}
p {
	margin: 0 0 1.5em; padding: 0;
	line-height: 1.5em;
}

dabblet.html

<link href='http://fonts.googleapis.com/css?family=Geo' rel='stylesheet' type='text/css'>
<div id="wrapper">
	<a id="logo" href="#"></a>
	<ul>
		<li><a href="#">Archive</a></li>
		<li><a href="#">About</a></li>
	</ul>
	<div id="content">
		<h1>Hello World.</h1>
		<p>
			Seamlessly visualize optimal services via one-to-one schemas. Authoritatively evisculate global "outside the box" thinking through viral sources. Dramatically optimize mission-critical ideas without e-business processes. Phosfluorescently.
		</p>
		<p>
			Seamlessly visualize optimal services via one-to-one schemas. Authoritatively evisculate global "outside the box" thinking through viral sources. Dramatically optimize mission-critical ideas without e-business processes. Phosfluorescently.
		</p>
		<p>
			Seamlessly visualize optimal services via one-to-one schemas. Authoritatively evisculate global "outside the box" thinking through viral sources. Dramatically optimize mission-critical ideas without e-business processes. Phosfluorescently.
		</p>
	</div>
</div>

settings.json

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