Pure CSS menu demo result

dabblet.css

/**
 * Pure CSS menu demo result
 */

html {
	height: 100%;
}
body {
	font-family: "Trebuchet MS", sans-serif;
	font-size: 30px;
	height: 100%;
	line-height: 1.4;
	opacity: 0;
	-webkit-transition: all 1000ms linear;
	   -moz-transition: all 1000ms linear;
		-ms-transition: all 1000ms linear;
		 -o-transition: all 1000ms linear;
			transition: all 1000ms linear;
}
body:hover {
	opacity: 1;
}
.moar-holder {
	height: 4em;
	width: 8em;
	display: table-cell;
	vertical-align: middle;
}
.moar {
	display: block;
	font-weight: bold;
	margin: 0 auto;
	width: 4em;
	text-align: center;
	-webkit-transition: all 500ms ease-out;
	   -moz-transition: all 500ms ease-out;
		-ms-transition: all 500ms ease-out;
		 -o-transition: all 500ms ease-out;
			transition: all 500ms ease-out;
}
.moar:hover {
	/* embiggen */
	font-size: 2em;
	/* rotate */
	display: block;
	-webkit-transform: rotate(-9deg); 
	   -moz-transform: rotate(-9deg); 
		-ms-transform: rotate(-9deg); 
		 -o-transform: rotate(-9deg); 
			transform: rotate(-9deg);
	/* rainbow */
	-webkit-background-clip: text;
	color: white;
	-webkit-text-fill-color: transparent;
	background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
	background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
	background-image:    -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
	background-image:     -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
	background-image:      -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
}

dabblet.html

<div>mmm... sandwich.</div>
<div class="moar-holder"><a class="moar" href="http://dabblet.com/gist/2004512" target="_top">MOAR!</a></div>

settings.json

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