Caffeina - Social Buttons v1

dabblet.css

/* Caffeina - Social Buttons v1 */

body{
	/*background: linear-gradient(45deg, #f06, yellow);/**/
	height: 500px;
	padding: 30px;
}

ul.caffeina-social {
	padding:0;list-style:none;
}

ul.caffeina-social li {
	float:left;
}



.caffeina-button {
	display: inline-block;
	width: auto;
	padding: 0px;
	padding-left: 20px;
	padding-right: 20px;
	height: 33px;
	color: #fff;
	font: 16px/30px 'Lucida Grande','Helvetica';
	text-shadow: 0px -1px 0px rgba(0,0,0,0.35);
	line-heigth: 30px;
	background-color: #3e5b99;
	border-radius: 5px;

	box-shadow: 0px 1px 3px rgba(0,0,0,.55),
		    inset 0px 15px 25px rgba(255,255,255,.35);	

	border: 1px solid rgba(0,0,0,.20);

	border-top: 1px solid rgba(255,255,255,.55);
	border-bottom: 1px solid rgba(0,0,0,.35);

	margin-right: 5px;
	margin-bottom: 10px;

	user-select: none;
	cursor: pointer;
	overflow: hidden;

}

.caffeina-button i {
	display: block;
	width: 52px;
	height: 33px;
	float: left;
	background-repeat: no-repeat;
	background-position: center 3px;

	border-right: 1px solid rgba(255,255,255,.45);
	margin-right: 20px;
	margin-left: -20px;

	user-select: none;
	cursor: pointer;

}

.caffeina-button>i {
	padding-left: 0px;
}

.caffeina-button:hover {
	box-shadow: 0px 1px 3px rgba(0,0,0,.55),
		    inset 0px 15px 25px rgba(255,255,255,.55);
}

.caffeina-button:active {
	margin-top:2px;
	margin-bottom: 8px;
	box-shadow: 0px 0px 1px rgba(0,0,0,.55), 
		    inset 0px 5px 25px rgba(0,0,0,.15),
		    inset 0px -5px 15px rgba(255,255,255,.45);
}


.caffeina-button:active i {
	height: 31px;
}


/* Icone Social */

.caffeina-button.twitter i {
	background-size: 75%;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAeCAMAAABt9nzSAAAAMFBMVEVDj6Aoanhgr8ARV2eMv8ozbnwWZ3rw9/n4+/sIU2Td5+kAAAAkfpIvjqQ/pLo3nbSO3KBFAAAADHRSTlPUd866fzr9VSz9EADxqPRcAAABPklEQVR42o3U227EIAwE0BiwudRO/v9vi+lUXnap1GFfAkcjJ1H2+vozzJl4xPXflLqH/kG5i+hV2gcl/pRmj1003ujIPcfm2hC778e0d36jJHOuHNU05YypSKedtktVAg/Rx6n3SmdQnNXku8AoBRYZG20FFZ180lWKmBAohpuHwJkZpejVPF5bWf0UN43SqN1oS36KYpRGreQZpxg24eAxW8Pg5xvShdqisH7ua+aO5diuUjho1hD7mjFVClrUDha9qdS2aAz7nFNra2NR2FrTWaY2Bh4W7Ch2pmXCoHgPR3m3nXp83HPpogyGWztPCpoDM6l9yurS6aD+8w0z597VjhK0lf4bUVvUXmWLb2taFZlOVDfoL69MGXTamkyncwPsa1Vu/y5uJ0ZRtN6pQAbFS8UzDQe4UzRvaYCRb39nN6V5Li1OAAAAAElFTkSuQmCC);
}

.caffeina-button.facebook i {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAMAAABmiH5zAAAAMFBMVEUtSHZBX5SKnsEVM2YfO21th7Lz9fhIZJRwhaj3+Prh5ewAAAAQMGYeQHkqTYkyVpSgdVtLAAAADHRSTlNj3JC3ark9rmAIFQDJAzq0AAAAeElEQVR42rWOyw7DMAgEsUNqQwz5/7/NgvNSj5U6px0Je5e2RHlJUoXHSSqNYZNQXcx9Dzy0G+RW6ZZ5rbWmetoHPNpURN4aHczcQr0wIHTPjy1nGJglCE7uVylSIchDoxVkLAid0F33a4aSqPZ5qKrfM35T//PbAwghEWDV4+UmAAAAAElFTkSuQmCC);
}

.caffeina-button.pinterest i {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAgCAMAAAA7dZg3AAAAMFBMVEW1QkK4UVGtZ2eSQkLEb2+CICCKHx+mVVXw29t3CAj48PCfHx/w5eUAAACREhKuLCzHvx16AAAADnRSTlPnxEksmYrPZlD9Iv4NAAVZNIgAAAEySURBVHjaddBRksQgCARQFBUFove/7baYbLZ2avrHVJ4oSNcTzlJrFfbnx02e23hS+S8xYM5pZnMefEgAtiiVUhItm6PxTRJQ+klZy2BBPOZaqXd1RLWXXVgd5G0L4G7Io24KSPZpEEbrHtgJVp282loF0nZrQYqy1Zi4LRS51zERDwvKlFGU9GLDak2DZCGHil+CJfZ8kB8qfsgORTdn4+qHKohAhCvYlSCk94vG/aTF9uyaYoagjEmtKGFAm421mZnc5020K06usKbZkBzEE5TU6YIV0b1zRhU3fO6z6YIhbdOozHWMU7QJ6Bw0xw7OS5gCFBG8HyX7Fb0e8gpKvZDhmtQhLzWQqPYI7vlH2T06cshLGS00TPXmJRTFK32QC0j8GyX9SnLkk6zoF8ryKdcPz9si7Z4q2oEAAAAASUVORK5CYII=);
}



/* Twitter */

.caffeina-button.twitter {
	background-color: #31a4ca;
}


.caffeina-button.twitter i {
	background-position: center 2px; 
}

/* Pinterest */

.caffeina-button.pinterest {
	background-color: #d6383b;
}


.caffeina-button.pinterest i {
	background-position: center 1px; 
}



/* Color */
.caffeina-button.yellow {
	background-color: #ea2;
}

.caffeina-button.green {
	background-color: #9a2;
}

.caffeina-button.red {
	background-color: #d6383b;
}

.caffeina-button.gloss {
	border-radius: 3em;
	overflow: hidden;
}
.caffeina-button.gloss:after {
	display: inline-block;
	content: "";
	background-image: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	width: 110%;
	margin: 1px;
	height: 50%;
	
	top: -110%;
	left: -10px;
	position: relative;
	border-radius: 5em / 3em;
}

dabblet.html

<!-- content to be placed inside <body>…</body> -->
<ul class="caffeina-social">
	<li><a class="caffeina-button facebook gloss"><i></i>Mi Piace</a></li>
	<li><a class="caffeina-button twitter gloss"><i></i>Condividi su Twitter</a></li>
	<li><a class="caffeina-button pinterest gloss"><i></i>Pin It!</a></li>
	<li><a class="caffeina-button yellow gloss">Consiglia ai tuoi amici!</a></li>
	<li><a class="caffeina-button green gloss">Continua &raquo;</a></li>
</ul>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}