Menu Candy para tags

 o post de hoje é um menu para tags fofinho que eu criei ontem com muito suor ~mentira eu fiquei só com a bunda sentada na cadeira~ Aperte em GO para ver o tutorial.

 

Menu Azul

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

a.bluetag {

color:#fff;

text-align: center;

font-family: silkscreen;

font-size: 8px;

text-shadow: 1px 1px 0px #b2d2db;

background: #e2f4f9;

border: 1px solid #b2d2db;

line-height:16px;

margin:1px;

margin-bottom:1px;

margin-left:20px;

display: inline-block;

padding-top: 5px;

float: center;

margin:1px;

padding:1px;

height: 16px;

width: 100px;

-webkit-transition-duration: .80s;

}

.shake{ margin-top: -2px; border: 1px solid transparent;}

.shake:hover {-webkit-animation: shake 1500ms alternate infinite linear;

-moz-animation: shake 1500ms alternate infinite linear;}

Para usar ele vá em um gadget de html/javascript e coloque:

<a class="bluetag" href="/">tag here      <img class="shake" width="18px" align="center" src="http://media.tumblr.com/tumblr_mc5uiid9j11roozkr.gif" /></a>

 

Menu Rosa

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

a.pinktag {

color:#fff;

text-align: center;

font-family: silkscreen;

font-size: 8px;

text-shadow: 1px 1px 0px #f4c6e4;

background: #fae8f4;

border: 1px solid #f4c6e4;

line-height:16px;

margin:1px;

margin-bottom:1px;

margin-left:20px;

display: inline-block;

padding-top: 5px;

float: center;

margin:1px;

padding:1px;

height: 16px;

width: 100px;

-webkit-transition-duration: .80s;

} 

.shake{ margin-top: -2px; border: 1px solid transparent;}

.shake:hover {-webkit-animation: shake 1500ms alternate infinite linear;

-moz-animation: shake 1500ms alternate infinite linear;}

 Para usar ele vá em um gadget de html/javascript e coloque:

<a class="pinktag" href="/">tag here      <img class="shake" width="18px" align="center" src="http://media.tumblr.com/tumblr_mc5uhzHJhU1roozkr.gif" /></a>  

 

Menu Marrom

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
a.browntag {
color:#fff;
text-align: center;
font-family: silkscreen;
font-size: 8px;
text-shadow: 1px 1px 0px #c2b4a7;
background: #ebe4dc;
border: 1px solid #c2b4a7;
line-height:16px;
margin:1px;
margin-bottom:1px;
margin-left:20px;
display: inline-block;
padding-top: 5px;
float: center;
margin:1px;
padding:1px;
height: 16px;
width: 100px;
-webkit-transition-duration: .80s;
}
menu3d1 {
color:#fff;
text-shadow: 1px 1px 1px #C3B7CE;
background: #D4CDDB;
border: 1px solid #C8BFD1;
box-shadow: inset 1px 1px 0px #E6E4E8;
line-height:20px; margin:-1px;
margin-bottom:1px;
display: inline-block;
padding-top: 5px;
border-radius:2px;
text-align: center;
font-family: PF Arma Five;
font-size: 8px;
float: center;
padding:1px;
height: 20px;
width: 60px;
-webkit-transition-duration: .80s;
}
.shake{ margin-top: -2px; border: 1px solid transparent;}
.shake:hover {-webkit-animation: shake 1500ms alternate infinite linear;
-moz-animation: shake 1500ms alternate infinite linear;} 

  Para usar ele vá em um gadget de html/javascript e coloque:

<a class="browntag" href="/">tag here      <img class="shake" width="18px" align="center" src="http://media.tumblr.com/tumblr_mc5uhs7x641roozkr.gif" /></a>