CSS Pebbles!

dabblet.css

/**
 * CSS Pebbles!
 */

html {
	background: url("http://michaeliahotel.com/img/sand.jpg");
	min-height: 100%;
}

.aside-icons {
	list-style: none;
	float: left;	
}

	.aside-icons > li > a {
		display: block;
		min-width: 1em;
		padding: 1em .8em .8em;
		margin: .2em 0 .5em;
		background: url("http://michaeliahotel.com/img/pebbles.jpg");
		text-shadow: 0 .1em .1em hsla(0,0%,100%,.6);
		font: bold 100% 'Palatino Linotype', Palatino, Georgia, serif;	
		text-decoration: none;
		box-shadow: -.1em -.2em 1em rgba(0,0,0,.7) inset, 0 .1em .5em rgba(0,0,0,.6);
		border: 1px solid rgba(0,0,0,.4);
		cursor: pointer;
	}
	
	.aside-icons > li > a {
		background-position: -30px 60px;
		background-color: #555B5D;
		color: black;
		line-height: 1;
		border-radius: 60% 80% / 100% 90% 60% 50%;
	}
	
	.aside-icons > li:nth-child(3n) > a {
		margin-left: .3em;
		background-position: -320px -60px;
		background-color: #7E8379;
		color: #445;
		line-height: 1.2;
		border-radius: 70% 50% / 70% 60%;
	}
	
	.aside-icons > li:nth-child(3n+2) > a {
		margin-left: .3em;
		background-position: -40px -70px;
		background-color: #7e6e67;
		color: #463d39;
		line-height: 1.2;
		border-radius: 70% 50% / 60% 70% 40%;
	}
	
	.aside-icons > li > a:hover {
		color: white;
		text-shadow: 0 0 .1em white, 0 0 .2em white;
	}

dabblet.html

<ul class="aside-icons">
	<li><a href="#en" hreflang="en-us" title="English">en</a></li>
	<li><a href="#el" hreflang="el" title="Ελληνικά">έλ</a></li>
	<li><a href="#tr" hreflang="tr" title="Türkçe">tr</a></li>
	<li><a href="#fr" hreflang="fr" title="Français">fr</a></li>
	<li><a href="#de" hreflang="de" title="Deutsch">de</a></li>
	<li><a href="#es" hreflang="es" title="Español">es</a></li>
	<li><a href="#ru" hreflang="ru" title="Русская">ru</a></li>
</ul>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}