/code/nojs.html

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>interactivity without javascript</title>
<style type="text/css">
button pre {
	font-family: monospace;
	text-align: left;
	margin-top: 1em;
	position: absolute;
}
button:active pre {
	-webkit-animation-name: jump;
	-webkit-animation-duration:	1s;
	-webkit-animation-direction: alternate;
	animation-name: jump;
	animation-duration:	1s;
	animation-direction: alternate;
}
@-webkit-keyframes jump { to: { margin-top: 0; } }
@keyframes jump { to: { margin-top: 0; } }
</style>
</head>
<body>
	<div>
		<button>Jump!
			<pre>
\o/
 |
/ \
			</pre>
		</button>
	</div>
</body>
</html>
download