Sliding Tags

Published on
Tag Cloud, Tag, CSS3 Transitions
No. of comments
Browser compatibility
Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8
MIT License
Sliding Tags CSS Code Snippet

A set of tags with nice, colorful counters that slide from the tag's edge.

Inspired by Thomas Bossée's PSD.


Alexey said

Thanks!!!Good job!

Alex said

These look great. Could you tell me how to make them show all the time instead of on a hover? I know it must not be that complicated, but you have a lot of includes and what not, and I'm trying to keep the CSS to the bare minimum so as not to overload the page.


Thibaut said

Hi Alex
Thanks. In the Sass source, simply remove the "@include transition" directives and change the ":hover" rules to apply without hover. You can also remove the "max-width" properties (required because width:auto can't be animated).

Alex said

Thanks for the reply Thibaut, I've removed the transition include, but in the hover all I have is this:

&:hover {
text-decoration: none;
span {
padding: 0 7px 0 6px;
max-width: 40px;

I'm missing something because it's still hidden until I hover.

Thibaut said

Try removing the ":hover span" rule (just keep text-decoration: none;) and replacing "max-width: 0; padding: 0 0 0 2px;" with "max-width: 40px; padding: 0 7px 0 6px" in the normal span rule (where "@include transition" was).

Alex said

Thanks again, just as you replied I had finally figured it out :)

These are very nice, thanks for making them available to us all!

Sreejesh said

This is super clean design, this will look awesome in my blog. Thanks

Guru said

Wao! Great sharing
i have implemented these cool tags into my blogger blog, have a look
I am going to make a tutorial for that as well, and yes All credit goes to you man!

Adriana said

thanks for sharing! I love the way it looks and moves and the the css you made is pretty nice. I will surely use this idea in future projects!

TestShoot said

Thanks for this code. If you have more text than is allowed to fit in the span tag, go in to the CSS and change the max-width for .tags a:hover span. I set mine to 90px instead of the default 40px.

WolfGrid said

Great job you done.

Leave a comment