Modelos para menu de tags

An-nyeong-ha-se-yo ~(ж＞▽＜)☆ HAShsudhushds entrada diferente desta vez, sempre começava o post sempre do mesmo jeito e hoje comecei dando um olá formal coreano >.< Grande a frase para dizer apenas um olá né? Mas então, que dia quente hoje nuss senhora ′°︿° Ontem estava um dia tão lindo aqui, tipo não que eu ame o inverno mas gostei tanto da sensação de fresquinho que estava, estou torcendo para que acabe logo o verão, porque? Porque quero me vestir bem novamente e usar coisas fofas que só no inverno tem (°ｏ°) Mesmo amando tanto o verão esse ano não vejo a hora mesmo desse calor ir embora. Tá, parei com a encheção de linguiça desnecessária, só uma coisinha esse gato da imagem do post é um fofo né? Gente eu amei a ilustra, muito tchuco!

Vamos agora ao que realmente interessa? Então, eu estava sem ideia alguma do que postar fiquei pensando e pensando e a unica coisa que veio na minha cabeça era de criar menus para tags, sei que existem milhares na net mas menu para tag nunca é demais não é mesmo? Eu mesma adoro usar vários modelos e nunca gosto de repetir o mesmo modelo em layouts diferentes hahaha ^▽^

LIVE PREVIEW ❣◕ ‿ ◕❣

Vá até seu modelo e clique em editar, dê um Ctrl F e dentro do tema procure por: ]]></b:skin> Acima dele cole o código do modelo desejado.

Modelo 1

tags {
display:block;
font-family: 'Sniglet', Trebuchet MS;
font-size: 10px;
text-transform: lowercase;
text-align: center;
letter-spacing:2px;
color: #555050;
text-shadow: 1px 1px 1px #fff;
float: center;
text-indent: 5px;
background: #F6F6F6;
border-left:2px solid #555050;
border-right:2px solid #555050;
margin:1px;
margin-bottom:1px;
padding: 2px 2px 2px 2px;
margin:1px;
line-height:17px;
height: 17px;
vertical-align: middle;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-transition-duration: .80s;
}
tags:hover {
border-left:2px solid #D4D4D4;
border-right:2px solid #D4D4D4;
display:block;
color:#D4D4D4;
letter-spacing:-12px;
-webkit-transition-duration: .80s;
}

Modelo 2 

tags1 {
display:block;
overflow:hidden;
font-family: 'Sniglet', Trebuchet MS;
font-size: 10px;
text-transform: lowercase;
text-align: center;
letter-spacing:2px;
color: #555050;
text-shadow: 1px 1px 1px #fff;
float: center;
text-indent: 5px;
background: #F6F6F6;
border-left:2px solid #555050;
border-right:2px solid #555050;
margin:1px;
margin-bottom:1px;
padding: 2px 2px 2px 2px;
margin:1px;
line-height:17px;
height: 17px;
vertical-align: middle;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-transition-duration: .80s;
}
tags1:hover {
display:block;
background-repeat: no-repeat;
box-shadow: inset 190px 0px #555050;
color:#555050;
letter-spacing:0px;
text-align: right;
-webkit-transition-duration: .80s;
}

Quem usar este modelo só uma dica, para que a fonte fique certinha no final ajeite apenas o box-shadow: inset 190px 0px #555050; onde está 190px você pode diminuir ou aumentar, mas se quer que a palavra apareça certinho no final diminua a sombra ok? faça bom aproveito amiguinho ^3^

Modelo 3

tags2 {
display:block;
overflow:hidden;
font-family: 'Sniglet', Trebuchet MS;
font-size: 10px;
text-transform: lowercase;
text-align: center;
letter-spacing:2px;
color: #555050;
float: center;
text-indent: 5px;
background: #F6F6F6;
border-left:2px solid #555050;
border-right:2px solid #555050;
margin:1px;
margin-bottom:1px;
padding: 2px 2px 2px 2px;
margin:1px;
line-height:17px;
height: 17px;
vertical-align: middle;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-transition-duration: .80s;
}
tags2:hover {
display:block;
color:#fff;
text-shadow: 1px 1px 1px #3D3131;
box-shadow: inset 0px 0px 20px 15px #555050;
-webkit-transition-duration: .80s;
}

Links:

<a href="LINK"><tags>Title here</tags></a>

<a href="LINK"><tags1>Title here</tags1></a> 

<a href="LINK"><tags2>Title here</tags2></a>