Skip to content

Instantly share code, notes, and snippets.

@lastguest
Created May 11, 2012 14:05
Show Gist options
  • Save lastguest/2659874 to your computer and use it in GitHub Desktop.
Save lastguest/2659874 to your computer and use it in GitHub Desktop.
Caffeina - Social Buttons v1
/* 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;
}
.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;
}
<!-- content to be placed inside <body>…</body> -->
<ul class="caffeina-social">
<li><a class="caffeina-button facebook"><i></i>Mi Piace</a></li>
<li><a class="caffeina-button twitter"><i></i>Condividi su Twitter</a></li>
<li><a class="caffeina-button pinterest"><i></i>Pin It!</a></li>
<li><a class="caffeina-button yellow">Condividi con tutti i tuoi amici!</a></li>
<li><a class="caffeina-button green">Continua &raquo;</a></li>
</ul>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment