Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pure CSS menu demo result
/**
* 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);
}
<div>mmm... sandwich.</div>
<div class="moar-holder"><a class="moar" href="http://dabblet.com/gist/2004512" target="_top">MOAR!</a></div>
{"view":"split-vertical","seethrough":"","prefixfree":"","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment