Elegant CSS Sliding Tags Effect with Post Count

CSS Sliding Tags Effect

The tags are similar to categories which hold different articles. When the user clicks on these tags he redirects to specify page where he can see related information about that tag.

Today, We will design these tags into sliding tags with elegant CSS effect. I will also include post count which will show on hover the tag.

These awesome looking sliding tags are created by using only CSS3 & HTML5. We will not touch up Javascript or you don’t need any fallback.

These sliding tags, slide out a small box when hovering the link and display the total number of post/page inside the small box.

Different CMS such as WordPress provides you the ability to add tags and show them into the front end of the website so the user of the site may know what related information site providing.

These tags help users to get quick information. Tags divide the articles/post into different categories so the user can easily get the information what they require.

We have created three different color variation which you can use for your website to make it look better.

How to Create Sliding Tags with Slide Out CSS Effect

First, we will create simple HTML for these tags. The HTML is very basic for these tags. We just need to manage UL, LI, and ahref but for the count the tags we need to add the span element.

<ul class="cc-tags pink">
  <li><a href="#">Web Developement <span>5</span></a></li>
  <li><a href="#">Freebies <span>10</span></a></li>
  <li><a href="#">Typography <span>15</span></a></li>
  <li><a href="#">Tutorial <span>18</span></a></li>
  <li><a href="#">Responsive Layout <span>23</span></a></li>
</ul>

In above code, we have used cc-tags class within the UL which will help you to design basic styling of these tags.

The class pink used to set the color of sliding tags. As we said that we create these tags in three different color variation so you can pick anyone class to get describe the color scheme.

The class you can use are pink, green and blue.

How to Apply CSS?

Let’s first we will see how we can make basic styling for sliding tags.

.cc-tags {
zoom: 1;
}
.cc-tags:before, .cc-tags:after {
content: '';
display: table;
}
.cc-tags:after {
clear: both;
}
.cc-tags li {
float: left;
list-style: none outside none;
margin: 0 0 8px 20px;
position: relative;
list-style:none;
}
.cc-tags a, .cc-tags span {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cc-tags a {	
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f2f2f2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
border:solid 1px #D2D2D2;
border-radius: 2px 0 0 2px;
color: #000000;
font-size: 14px;
height: 32px;
line-height: 30px;
padding: 0 12px;
text-decoration: none;

}

Adding Post Counter

After creating basic stuff,  We need to make a small box which will open on hover the tags. This box will slide out on the right side of the tag and will display a total number of post count.

.cc-tags a:hover span {
padding: 0 12px;
max-width: 40px;
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.cc-tags span {
border-radius: 0 2px 2px 0;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
height: 32px;
left: 100%;
line-height: 31px;
max-width: 0;
opacity: 0.95;
overflow: hidden;
padding: 0 0 0 2px;
position: absolute;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
top: 0;
transition-delay: 0s;
transition-duration: 0.3s;
transition-property: padding, max-width;
transition-timing-function: ease-out;
z-index: 2;
}

Apply Different Colors

At the end we will set the color for sliding tag box, Here we will show you one color but in the download file, you will find all three color variations.

.pink span {
background: #f453a1; /* Old browsers */
background: -moz-linear-gradient(top,  #f453a1 0%, #f70984 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f453a1), color-stop(100%,#f70984)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f453a1 0%,#f70984 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f453a1 0%,#f70984 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f453a1 0%,#f70984 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f453a1 0%,#f70984 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f453a1', endColorstr='#f70984',GradientType=0 ); /* IE6-9 */
border-color: #f70984;
}

That’s It. Hope it will help you to design the post tags in different way.

Code ExamplesYou May Also Like