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;
	display:block;
    margin-left:30px;
}


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 {background-color:hsl(250,20%,30%);}
div:hover:before {background-color:green;z-index:1;transform:translateY(85px) rotate(180deg);height:15px;}
div:hover:after {background-color:green;z-index:1;transform:translateY(-100px) rotate(180deg);}

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"}