Special html item - Tag

With these codes you can create a tag.

Base code

1

Create a HTML layer and put these codes into the HTML field:

<div id="tagcontainer" class="tagcontainer">
  <a href="#" target="_blank">
    <span class="nextendtag">
      tag content
    </span>
  </a>
</div>    

2

And put these codes to the CSS field:

div#tagcontainer a{
    text-decoration: none;
    color: #ffffff;
}
div#tagcontainer a:hover{
    color: #000000;
}
div#tagcontainer span.nextendtag{
    float:right;
    height:24px;
    line-height: 24px !important;
    position:relative;
    padding:0 10px 0 12px !important;
    margin-left: 12px;
    background: #357cbd !important;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px; 
    border-bottom-right-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;    
    border-top-right-radius:4px;    
} 

div#tagcontainer span.nextendtag:before{
    content: "";
    float:right;
    position:absolute;
    left:-9px;
    border-color:transparent #357cbd transparent transparent;
    border-style:solid;
    border-width:12px 9px 12px 0;
}

div#tagcontainer span.nextendtag:after{
    content: "";
    position:absolute;
    top:10px;
    left:0;
    float:right;
    width:4px;
    height:4px;
    -moz-border-radius:99px;
    -webkit-border-radius:99px;
    border-radius:99px;
    background: #fff;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}


div#tagcontainer span.nextendtag:hover{
  background:#01add3 !important;
}   

div#tagcontainer span.nextendtag:hover:before{
  border-color: transparent #01add3 transparent transparent;
}