Github Ribbon only with css3

github-ribbon.html

<a id="github" href="https://github.com/bueltge">
	<span>Fork me on GitHub!</span>
	<span>Get free lemonade!</span>
</a>

style.css

/**
 * Github badge
 */
#github{
	right:-65px;
	height:30px;
	top:40px;
	position:absolute;
	text-decoration:none;
	width:250px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg)
}
#github span{
	color:#fff;
	background:#000;
	font-size:14px;
	left:0;
	padding:5px 0;
	position:absolute;
	text-align:center;
	width:250px;
	-moz-box-shadow:rgba(0,0,0,0.2) 1px 1px 10px;
	-webkit-box-shadow:rgba(0,0,0,0.2) 1px 1px 10px;
	-o-box-shadow:rgba(0,0,0,0.2) 1px 1px 10px;
	box-shadow:rgba(0,0,0,0.2) 1px 1px 10px;
	-moz-transition-property:opacity;
	-webkit-transition-property:opacity;
	-o-transition-property:opacity;
	transition-property:opacity;
	-moz-transition-duration:1s;
	-webkit-transition-duration:1s;
	-o-transition-duration:1s;
	transition-duration:1s
}
#github span:last-child{
	background:#a30207;
	opacity:0
}
#github:hover span:first-child{
	opacity:0
}
#github:hover span:last-child{
	opacity:1
}