Dabblet: CSS3 badges

dabblet.css

/**
 * Dabblet: CSS3 badges
 */

.badge {
	font-size: 15px;
	box-sizing: border-box;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	padding-top: 1.7em;
	width: 6.5em;
	height: 6.5em;
	background: red;
	background:radial-gradient(1.5em 1.5em, 3em 3em, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%), linear-gradient(rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.4) 100%), red;
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0,0,0,.4);
	box-shadow: 1px 2px 10px rgba(0,0,0,.5),inset -2px -2px 2px rgba(0,0,0,.2);
	border-radius: 50%;
	transform: rotate(-20deg);
	transition: .2s transform;
}

.badge .date {
	color: rgba(255, 255, 255, .5);
}

.badge.second {
	transform: rotate(-7.5deg)
}

.badge:hover {
	background: inherit, inherit, blue;
}

body {
  	font-family: Arial, Verdana, sans-serif;
}

dabblet.html

<a href="#" class="badge">HTML5 &&nbsp;CSS3<br><span class="date">28/5</span></a>

<a href="#" class="badge second">Mobilní<br>webdesign<br><span class="date">13/6</span></a>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}