<a href="#">Badge <span>1</span></a>
body {
background: #ccc;
margin: 30px;
}
a {
position: relative;
padding: 3px 5px;
font:bold 36px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
span {
position: absolute;
top:-5px;
right: -8px;
padding: 3px 9px;
border: 2px solid white;
border-radius:100px;
background: -webkit-linear-gradient(top, #FF6969 0%,#ff0000 100%);
box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset;
-webkit-background-clip: padding-box;
font:bold 16px/20px "Helvetica Neue", sans-serif;
color: white;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.