jensgro/dabblet.css

## dabblet.css
/**
 * keyboard order and flexbox ordering
 */

nav {
	display: flex;
	padding: 20px;
}
a:nth-of-type(2) {
	order: -1;
}

a {
	display: inline-block;
	text-decoration: none;
	padding: 10px;
	background: #a20000;
	color: #fff;
	margin-right: 10px;
	transition: all 0.3s;
}

a:hover, a:focus {
	background-color: #454545;
	padding: 10px 20px;
	transition: all 0.3s;
	position: relative;
	z-index: 10;
	margin-left: -10px;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<nav>
<a href="http://vasilis.nl">Link 1</a>
<a href="http://vasilis.nl">Link 2</a>
<a href="http://vasilis.nl">Link 3</a>
</nav>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* keyboard order and flexbox ordering
	*/

	nav {
	display: flex;
	padding: 20px;
	}
	a:nth-of-type(2) {
	order: -1;
	}

	a {
	display: inline-block;
	text-decoration: none;
	padding: 10px;
	background: #a20000;
	color: #fff;
	margin-right: 10px;
	transition: all 0.3s;
	}

	a:hover, a:focus {
	background-color: #454545;
	padding: 10px 20px;
	transition: all 0.3s;
	position: relative;
	z-index: 10;
	margin-left: -10px;
	}
	<!-- content to be placed inside <body>…</body> -->

	<nav>
	<a href="http://vasilis.nl">Link 1</a>
	<a href="http://vasilis.nl">Link 2</a>
	<a href="http://vasilis.nl">Link 3</a>
	</nav>