pdf Download box

dabblet.css

/**
 * pdf Download box
 */

html {
	background: url('http://subtlepatterns.com/patterns/purty_wood.png');
}

.pdf-carier{
	margin: 10%;
	display:block;
	height:70px;/* 5 x 70 = 350 */
	width:350px;
	background-color:black;
	color:white;
	font-family: Helvetica;

}
.pdf-carier > span{
	display:table;	
	height:100%;
	float:left;
}
.pdf-arrow-cnt{
	width:20%;	
	background-color:orange;
}
.pdf-icon-cnt{
	width:10%;
	background-image:url("#");
}
.pdf-text-cnt{
	width:70%;
}
.link-arrow{
	width:100%;
	//height:0px;
	display: table-cell;
	text-align:center;
	vertical-align: middle;
}
.link-text{
	display: table-cell;
	padding-left:10px;
	vertical-align:middle;
}

dabblet.html

<a href="#pdflink">
	<div class="pdf-carier">
		<span class="pdf-arrow-cnt">
			<span class="link-arrow">&darr;</span>
		</span>
		<span class="pdf-icon-cnt">
			<span class="pdf-icon"></span>
		</span>
		<span class="pdf-text-cnt">
			<span class="link-text">My link</span>
		</span>
	</div>
</a>

settings.json

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