zocial

dabblet.css

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

.entypo-note {
	font-size:80px;
    margin-left:-20px;
    margin-top:-46.2px;
    position:absolute;
    top:50%;
    left:50%;
    transition: inherit;
}
.entypo-note {
	color:inherit;
}

body {}
div{width:100px;height:100px;background-color:hsl(200,20%,30%);margin:0 auto;position:relative;transition:all 1s ease-in-out;}
div:before{
	content:"";
	position:absolute;
	top:0%;
	z-index:1;
	background-color:red;
	width:100px;
	height:5px;
	transition:all .75s ease-in-out;
}
div:after{
	content:"";
	position:absolute;
	bottom:0%;
	z-index:1;
	background-color:red;
	width:100px;
	height:5px;

	transition:all 1s ease-in-out;
}
div:hover {color:white;background-color:hsl(250,20%,30%);cursor:pointer;}
div:hover:before {z-index:1;transform:translateY(95px);}
    
div:hover:after {z-index:1;transform:translateY(-95px);}

dabblet.html

<div><span class="entypo-note"></span></div>

dabblet.js

// alert('Hello world!');

settings.json

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