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; }