I am going to share tags design using pure CSS3. This is used to highlight your blog tags.

Blog Tags are used to highlight keywords or search words in a blog or site content. These tags have been designed with pure CSS3 and additional fallback for older browsers.

CSS3 Tags
CSS3 Tags

CSS3 Code

a {
text-decoration:none;
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
}
.tag-body {
cursor:pointer !important;
}
a.tag-body:active {
top:1px
}
.tag-body, a.tag-body {
display:inline-block;
position:relative;
font-size:12px;
height:15px;
padding:2px 8px 8px 15px;
margin:auto auto 9px 15px;
border-width:1px 1px 1px 0;
border-style:solid;
-moz-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
-ms-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
-o-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
-khtml-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
line-height:1.8
}
.tag:after {
position:absolute;
background:none repeat scroll 0 0 whitesmoke;
border:1px solid #FFF;
-moz-border-radius:25px;
-webkit-border-radius:25px;
-ms-border-radius:25px;
-o-border-radius:25px;
border-radius:25px;
-moz-box-shadow:-1px -1px 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow:-1px -1px 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.3) inset;
-ms-box-shadow:-1px -1px 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.3) inset;
-o-box-shadow:-1px -1px 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow:-1px -1px 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.3) inset;
content:"";
height:5px;
left:0;
top:8px;
width:5px;
z-index:0;
background-clip:padding-box;
-webkit-background-clip:padding-box
}
.tag:before {
background:inherit;
-moz-transform:rotate(45deg) translate(-8px, 5px);
-webkit-transform:rotate(45deg) translate(-8px, 5px);
-ms-transform:rotate(45deg) translate(-8px, 5px);
-o-transform:rotate(45deg) translate(-8px, 5px);
transform:rotate(45deg) translate(-8px, 5px);
border-style:solid;
border-width:0 0 1px 1px;
-moz-border-radius:3px 4px 3px 6px;
-webkit-border-radius:3px 4px 3px 6px;
-ms-border-radius:3px 4px 3px 6px;
-o-border-radius:3px 4px 3px 6px;
border-radius:3px 4px 3px 6px;
height:79%;
content:"";
left:2px;
top:18%;
position:absolute;
width:19px;
-moz-box-shadow:1px -1px 1px rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow:1px -1px 1px rgba(255, 255, 255, 0.5) inset;
-ms-box-shadow:1px -1px 1px rgba(255, 255, 255, 0.5) inset;
-o-box-shadow:1px -1px 1px rgba(255, 255, 255, 0.5) inset;
box-shadow:1px -1px 1px rgba(255, 255, 255, 0.5) inset;
z-index:0
}
.tag {
bottom:0;
height:100%;
right:-1px;
width:101%;
z-index:0;
background:none !important
}
.tag-body.yellow {
border-color:#FFA71D;
color:#202020;
text-shadow:0 1px #F0E9A1 !important;
background:#feb645;
background:-moz-linear-gradient(top, #f1e767 0%, #feb645 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1e767), color-stop(100%, #feb645));
background:-webkit-linear-gradient(top, #f1e767 0%, #feb645 100%);
background:-o-linear-gradient(top, #f1e767 0%, #feb645 100%);
background:-ms-linear-gradient(top, #f1e767 0%, #feb645 100%);
background:linear-gradient(top, #f1e767 0%, #feb645 100%)
}
.yellow .tag:before {
border-color:#FFA71D;
background:#feb645;
background:-moz-linear-gradient(-45deg, #f1e767 0%, #feb645 100%);
background:-webkit-gradient(linear, left top, right bottom, color-stop(0%, #f1e767), color-stop(100%, #feb645));
background:-webkit-linear-gradient(-45deg, #f1e767 0%, #feb645 100%);
background:-o-linear-gradient(-45deg, #f1e767 0%, #feb645 100%);
background:-ms-linear-gradient(-45deg, #f1e767 0%, #feb645 100%);
background:linear-gradient(-45deg, #f1e767 0%, #feb645 100%)
}
.firefox16 .yellow .tag:before {
background:linear-gradient(125deg, #f1e767 0%, #feb645 100%)
}
a.yellow {
color:#6F4503 !important
}
a.yellow:hover {
color:#000 !important
}
a.tag-body:hover {
-moz-box-shadow:1px 1px 0 #C0C0C0;
-webkit-box-shadow:1px 1px 0 #C0C0C0;
-ms-box-shadow:1px 1px 0 #C0C0C0;
-o-box-shadow:1px 1px 0 #C0C0C0;
box-shadow:1px 1px 0 #C0C0C0
}
.tag {
bottom:0;
height:100%;
right:-1px;
width:101%;
z-index:0;
background:none !important
}

Html Usuage

<a class="tag-body yellow" href="http://w3lessons.info/tag/tips-tricks/"><span class="tag">Tips & Tricks</span></a>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo Download Now

Related Posts