Tag design

Tag design, for in the article.

by Imri Paloja

HTML

<div class="tag"> 
  <a class="linktag" rel="nofollow" href="/search.php?query=Nagios&amp;search=1">Nagios</a> 
  <a class="linktag" rel="nofollow" href="/search.php?query=Icinga&amp;search=1">Icinga</a> 
  <a class="linktag" rel="nofollow" href="/search.php?query=Editorial&amp;search=1">Editorial</a> 
</div>

CSS

.tag {
    border-bottom: 1px dotted #CCCCCC;
    border-top: 1px dotted #CCCCCC;
    margin-left: -5px;
    margin-right: -5px;
    padding: 1px 0px 5px 10px;
}

.linktag {
    border: 1px solid #3465A4;
    border-radius: 50px 50px 50px 50px;
    box-shadow: 1px 0 1px 0 #3465A4;
    font-size: 10px;
    padding: 2px 5px;
    text-transform: uppercase;
}
a {
    color: #3465A4;
    text-decoration: none;
}


.linktag:hover {
    background-color: #3465A4;
    color: #FFFFFF;
    text-decoration: none;
}

article a:hover {
    transition: color 500ms ease 0s;
}