Various options for "Deploy to Heroku" Badges

dabblet.css

/**
 * Various options for "Deploy to Heroku" Badges
 */
 
 @import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);
body {
	font-family:'Droid Sans', Arial, sans-serif;
}

dt {text-align: right;}
dt, dd {float: left; width: 12.5em; margin: 0.35em 0.2em ;}
dt,dl::after {display:block; clear:left;}
dt::after { content:":";}
dl::after { content:"";}

h2 a {
	color: inherit;
	text-decoration: inherit;
}

h2:hover a {
	border-bottom: 0.1em solid ;
}

dabblet.html

<h2>
	The standard button
</h2>

<p>
	Although the technology and philosophy behind the 'Deploy to Heroku' Button are quite awesome, the default look may not be what you want.
</p>
<p>
	For one thing there is a distinct difference between the PNG and SVG versions Heroku has on offer.
</p>

<dl>
	<dt>PNG format</dt>
	<dd><img src="https://www.herokucdn.com/deploy/button.png" /></dd>
	<dt>SVG format</dt>
	<dd><img src="https://www.herokucdn.com/deploy/button.svg" /></dd>
</dl>

<p>
	Which means you have to choose between "looks good" and "Retina Ready".
</p>
<p>
	Beyond that... the shape, form or size might break with the look and feel of your site or README file.
</p>
<p>
	Or maybe, if you're a bit like me, you dislike the fact that you can't just use a service provider you already use for other services anyway.
</p>

<h2>Using a <a href="	//shields.io">Shields.io</a> button</h2>
<p>
	As shield.io already offers a decent ammount of badges for various service providers, it might be nice to use the same style for your deploy button.
	The only real down-side is that the button will not contain the nice little icon. We could just use an "up arrow" instead.
</p>
<p>
Shields.io offers 3 flavours of styles you can choose from...
</p>
<dl>
	<dt>Standard</dt>
	<dd><img src="http://img.shields.io/badge/%E2%86%91%20Deploy%20to-Heroku-7056bf.svg" />
</dd>
	<dt>Flat (with rounded corners)</dt>
	<dd><img src="http://img.shields.io/badge/%E2%86%91%20Deploy%20to-Heroku-7056bf.svg?style=flat" /></dd>
	<dt>Flat and Square</dt>
	<dd><img src="http://img.shields.io/badge/%E2%86%91%20Deploy%20to-Heroku-7056bf.svg?style=flat-square" /></dd>
</dl>
<p>
	Just pic your favorite one and you're good to go!
</p>

dabblet.js

/*/ alert('Hello world!'); /*/

settings.json

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