Menu para tags

Simples, sem hover, borda grossa nas laterais - Mude a cor para a que quiser

Código a ser posto em um gadget de html/javascript:

<style> 

.direita { float:right; width:49%; text-align:justify; }

.esquerda { float:left; width:49%; text-align:justify; }

#menutags20{

background-color: #ffeaee;

width: 91%;

height: 11px;

float: left;

font: 11px arial;

color: #e6adb9;

padding: 2px 0 6px 0;

text-align: center;

margin: 1px;

margin-bottom: 4px;

border-top: 1px solid #f7d0d8;

border-bottom: 1px solid #f7d0d8;

border-left: 3px solid #f7d0d8;

border-right: 3px solid #f7d0d8;

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

} </style>

<div class="esquerda">

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

</div>

<div class="direita">

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

</div>

Simples, com hover escuro

Código a ser posto em um gadget de html/javascript:

<style> 

.direita { float:right; width:49%; text-align:justify; }

.esquerda { float:left; width:49%; text-align:justify; }

#menutags20{

background-color: #e9e9e9;

width: 98%;

height: 11px;

float: left;

font: 10px arial;

color: #a2a2a2;

padding: 1px 0 4px 0;

letter-spacing: 2px;

text-align: center;

margin: 1px;

text-transform: lowercase;

margin-bottom: 4px;

-moz-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

#menutags20:hover{

background-color: #525252;

width: 98%;

height: 11px;

float: left;

font: 10px arial;

color: #dad7d7;

padding: 1px 0 4px 0;

letter-spacing: 2px;

text-align: center;

margin: 1px;

text-transform: lowercase;

margin-bottom: 4px;

}

 </style>

<div class="esquerda">

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

</div>

<div class="direita">

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

</div>

Estilo botãozinho, sem hover - Mude a cor se quiser

Código a ser posto em um gadget de html/javascript:

<style>
.direita { float:right; width:49%; text-align:justify; }
.esquerda { float:left; width:49%; text-align:justify; }
#menutags20{
background-color: #e9eef3;
width: 98%;
height: 11px;
float: left;
font: 11px trebuchet ms;
color: #b2bfcb;
padding: 1px 0 6px 0;
letter-spacing: 1px;
border-left: 1px solid #dae0e6;
border-top: 1px solid #dae0e6;
border-right: 1px solid #dae0e6;
border-bottom: 3px solid #ced5db;
text-align: center;
margin: 1px;
margin-bottom: 4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}


 </style>
<div class="esquerda">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
</div>
<div class="direita">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
</div>