<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);
}​
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.