Flexible buttons with ems (duh!)

dabblet.css

/**
 * Flexible buttons with ems (duh!)
 */

body {
	font-family: sans-serif
}

button {
	padding: .5em .8em .4em;
	border: 1px solid transparent; /* We want this to be 1px regardless of button size */
	border-radius: .3em;
	background: hsl(330, 100%, 50%);
	background-image: linear-gradient(hsla(330,0%,100%,.5), hsla(0,0%,100%,0));
	box-shadow: 0 1px white inset, /* We want this to be 1px regardless of button size */
	            0 .3em hsl(330, 100%, 30%),
	            0 .3em .8em rgba(0,0,0,.5);
	color: white;
	text-shadow: 0 -.06em .1em hsla(330, 100%, 10%, .5);
	font: inherit;
}

p.emphasized {
	font-size: 160%;
}

footer {
	font-size: 70%;
}

dabblet.html

<button>Cheesy pink button</button>

<p class="emphasized">This ia paragraph with large text.
	<button>And another button</button>
</p>

<footer>
	This is a footer with small text.
	<button>Oh, and a button</button>
</footer>

dabblet.js

// alert('Hello world!');

settings.json

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