Skip to content

Instantly share code, notes, and snippets.

@hekt

hekt/tweet_button.css

Created February 23, 2012 10:49
Show Gist options
  • Save hekt/1892229 to your computer and use it in GitHub Desktop.
Save hekt/1892229 to your computer and use it in GitHub Desktop.
Download ZIP
pure css tweet button
Raw
tweet_button.css
/*
* Pure CSS Tweet Button
*/
#tweet_button span {
display: inline-block;
}
#tweet_button .wrap {
position: relative;
font-family: "Arial", sans-serif;
}
/* button */
#tweet_button .wrap a {
color: #333;
text-decoration: none;
}
#tweet_button .wrap > a {
display: inline-block;
height: 18px;
line-height: 1.75;
margin: 0 5px 0 0;
padding: 0 3px 0 19px;
border: 1px solid #CCC;
border-radius: 4px;
background-color: #EEE;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#FFF), to(#DDD));
background-image: -moz-linear-gradient(270deg, #FFF, #DDD);
background-image: -o-linear-gradient(270deg, #FFF, #DDD);
color: #333;
font-weight: bold;
font-size: 11px;
text-shadow: 0 1px 1px #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr='#FFFFFF',
endColorstr='#DDDDDD');
}
#tweet_button .wrap > a:hover {
border-color: #BBB;
background-image: -webkit-gradient(linear,left top, left bottom,
from(#F8F8F8), to(#D8D8D8));
background-image: -moz-linear-gradient(270deg, #F8F8F8, #D8D8D8)
background-image: -o-linear-gradient(270deg, #F8F8F8, #D8D8D8)
}
/* twitter bird */
#tweet_button .wrap:before,
#tweet_button .wrap:after,
#tweet_button .text:before,
#tweet_button .text:after,
#tweet_button .wrap > a:before,
#tweet_button .wrap > a:after {
display: block;
position: absolute;
content: "";
}
/* body */
#tweet_button .wrap > a:before {
left: 3px;
top: 5px;
width: 13px;
height: 10px;
background-color: #019AD2;
border-radius: 100%;
box-shadow: 0 1px 1px #FFF;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
content: "";
}
/* wing and tail*/
#tweet_button .wrap > a:after {
left: -1px;
top: 8px;
border-width: 5px 4px 0 5px;
border-color: #EEE transparent;
border-style: solid;
border-radius: 2px;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
-ms-transform: rotate(65deg);
-o-transform: rotate(65deg);
}
/* wing and head */
#tweet_button .text:before {
top: 3px;
left: 2px;
border-width: 6px 6px 0 6px;
border-color: #F8F8F8 transparent;
border-style: solid;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
}
/* crest */
#tweet_button .text:after {
top: 4px;
left: 12px;
width: 1px;
height: 2px;
background-color: #019AD2;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
/* bill */
#tweet_button .wrap:after,
#tweet_button .wrap:before {
top: 8px;
left: 12px;
border-width: 3px 3px 0 3px;
border-color: #019AD2 transparent;
border-style: solid;
}
#tweet_button .wrap:after {
border-width: 0 3px 3px 3px;
top: 7px;
}
/* count */
#tweet_button .count {
position: relative;
line-height: 1.75;
height: 18px;
padding: 0 4px;
border: 1px solid #CCC;
border-radius: 4px;
background-color: #FFF;
font-size: 11px;
}
#tweet_button .count a:hover {
text-decoration: underline;
}
#tweet_button .count:before,
#tweet_button .count:after {
position: absolute;
top: 6px;
left: -3px;
z-index: 3;
border-style: solid;
border-color: transparent #FFF;
border-width: 3px 3px 3px 0;
content: "";
}
#tweet_button .count:after {
z-index: 2;
top: 5px;
left: -4px;
border-width: 4px 4px 4px 0;
border-color: transparent #CCC;
}
Raw
tweet_button.html
<html>
<body>
<ul id="social_buttons">
<li id="tweet_button">
<span class="wrap">
<a href="#"><span class="text">Tweet</span></a>
<span class="count"><a href="#">0</a></span>
</span>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment