Better CSS3 ticket-like tags

Original: http://jsfiddle.net/leaverou/T9bmw/

by Jens Grochtdreis

HTML

<h1>Tags:</h1>
<a href="#" rel="tag">Pure CSS3 Ticket</a>
<a href="#" rel="tag">CSS3Ticket</a>
<a href="#" rel="tag">HTML5</a>
<a href="#" rel="tag">Design</a>
<a href="#" rel="tag">Development</a>
<a href="#" rel="tag">JQuery</a>
<a href="#" rel="tag">Photoshop</a>
<a href="#" rel="tag">Javascript</a>
<a href="#" rel="tag">WordPress</a>
<a href="#" rel="tag">Tags</a>
<a href="#" rel="tag">Green</a>
<a href="#" rel="tag">Tutorial</a>
<a href="#" rel="tag">Resource</a>
<a href="#" rel="tag">Site</a>

<h1>Some bigger tags:</h1>
<div class="bigger">
    <a href="#" rel="tag">Elements</a>
    <a href="#" rel="tag">Application</a>
    <a href="#" rel="tag">Coding</a>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 12px;
}

.bigger {
    font-size: 24px;
}

a[rel="tag"] {
    display: inline-block;
    position:relative;
    padding: .7em;
    padding-left: 2em;
    margin: 0 .5em .5em 0;
    background: #8dc63f;
    color: rgba(255,255,255,.6);
    text-decoration:none;
    font-weight: bold;
}

a[rel="tag"]:hover {
    background:#b30;
    color:white;
}

a[rel="tag"]:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:1;
    
    background: -moz-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                -moz-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em),
                -moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
    background: -o-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                -o-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em),
                -o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
    background: -ms-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                -ms-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em),
                -ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
    background: -webkit-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                -webkit-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em),
                -webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
}

a[rel="tag"]:after {
    content: '';
    position:absolute;
    top:.25em;
    right:.25em;
    bottom:.25em;
    left:.25em;
    border: 1px rgba(0,0,0,.3) dashed;
    outline: 1px rgba(255,255,255,.5) dashed;
}