Untitled

dabblet.css

@font-face {
    font-family: 'BlackJackRegular';
    src: url('http://db.tt/vnqPyeoh');
    src: url('http://db.tt/vnqPyeoh?#iefix') format('embedded-opentype'),
         url('http://db.tt/bcRc4WAo') format('woff'),
         url('http://db.tt/ajsqpqnS') format('truetype'),
         url('http://db.tt/GPBodWt4#BlackJackRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
    
.container {
	background: #f7f5f5 url(http://db.tt/KbSmZaMT);	
	border-bottom: 2px solid #44aa99;
	box-shadow: 0 5px 13px rgba(0,0,0,.75); ;
	height: 45px;	
	overflow: hidden;
	margin: 100px auto;
	padding-top: 20px;
	position: relative;
	width: 237px;
}

.portfolio-icon {
	background-image: url(http://db.tt/NDVlqDYB);
	background-repeat: none;
	height: 25px;
	left: 45px;
	position: absolute;
	width: 26px;
	z-index: 9999;
	transition: background-position 400ms linear;

}

a {
	font-family: 'BlackJackRegular';
	font-weight: normal;
	font-size: 2em;
	color: black;
	display: block;
	top: 15%;
	left: 35%;
	right: 0%;
	position: absolute;
	text-decoration: none;
	z-index: 9999;
	transition: color 400ms linear;

}
	
	
.bottom-border {
	background: #44aa99 url(http://db.tt/ZDnYwpK0);	
	height: 0;	
	position: absolute;
	width: 237px;
	bottom: 0;
	z-index: 9998;
	transition: height 400ms linear;

}

.container:hover {
	cursor:pointer;
}

.container:hover .bottom-border {
        height: 65px;
	transition: height 400ms linear;
}

.container:hover a {
	color: white;
	transition: color 400ms linear;

} 

.container:hover .portfolio-icon {
       	background-position: 0 -27px;
       	transition: background-position 400ms linear;
}

dabblet.html

<div class="container">
        <div class="portfolio-icon"></div>
	<a href="#">Portfolio</a>
	<div class="bottom-border"></div>
</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"result"}