Menus de afiliados

Modelo 01: Gradiente azul com hover.

 

01. Copie o código do quote abaixo e cole acima de ]]></b:skin>

.amg1:hover{
background: rgb(208,219,228);
background: -moz-linear-gradient(top,  rgba(208,219,228,1) 17%, rgba(184,203,219,1) 18%, rgba(227,234,239,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(17%,rgba(208,219,228,1)), color-stop(18%,rgba(184,203,219,1)), color-stop(100%,rgba(227,234,239,1)));
background: -webkit-linear-gradient(top,  rgba(208,219,228,1) 17%,rgba(184,203,219,1) 18%,rgba(227,234,239,1) 100%);
background: -o-linear-gradient(top,  rgba(208,219,228,1) 17%,rgba(184,203,219,1) 18%,rgba(227,234,239,1) 100%);
background: -ms-linear-gradient(top,  rgba(208,219,228,1) 17%,rgba(184,203,219,1) 18%,rgba(227,234,239,1) 100%);
background: linear-gradient(to bottom,  rgba(208,219,228,1) 17%,rgba(184,203,219,1) 18%,rgba(227,234,239,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dbe4', endColorstr='#e3eaef',GradientType=0 );
}
.amg1 a{
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0 #b4c4d1;
}

02. Agora, copie o código abaixo e cole em seu gadget.

<div class="amg1"><a href="/" title="Título">Vaga</a></div>

Modelo 02: Modelo rosinha com borda e hover.

 

01. Copie o código do quote abaixo e cole acima de ]]></b:skin>

.amg2{
padding: 4px;
background: #f3dddb;
border: 1px solid #e7c8c5;
box-shadow: inset 0 0 4px #e8c3c0;
border-radius: 20px;
margin-top: 2px
margin-left: 0px;
margin-right: 0px;
margin-bottom: 3px;
display: inline-block;
height: 16px;
text-decoration: none;
color: #fff;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
text-align: center;
text-transform: uppercase;
-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;
}
.amg2:hover{
border-radius: 1px;
background: #f3dddb;
border: 1px solid #eccfcd;
-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;
}
.amg2 a{
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0 #e6c4c2;
}

02. Agora, copie o código abaixo e cole em seu gadget.

<div class="amg2"><a href="/" title="Título">Vaga</a></div>

Modelo 03: Rosa com borda outline, gradiente e sem hover.

 

01. Copie o código do quote abaixo e cole acima de ]]></b:skin>

.amg3{
padding: 4px;
background: rgb(255,211,220);
background: rgb(255,211,220);
background: -moz-linear-gradient(top,  rgba(255,211,220,1) 0%, rgba(255,239,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,211,220,1)), color-stop(100%,rgba(255,239,242,1)));
background: -webkit-linear-gradient(top,  rgba(255,211,220,1) 0%,rgba(255,239,242,1) 100%);
background: -o-linear-gradient(top,  rgba(255,211,220,1) 0%,rgba(255,239,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,211,220,1) 0%,rgba(255,239,242,1) 100%);
background: linear-gradient(to bottom,  rgba(255,211,220,1) 0%,rgba(255,239,242,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd3dc', endColorstr='#ffeff2',GradientType=0 );
border: 1px solid #ffc5d1;
outline: solid 1px #ffeff2;
outline-offset: -2px;
box-shadow: inset 0 0 4px #ffcad5;
margin-top: 2px
margin-left: 0px;
margin-right: 0px;
margin-bottom: 3px;
display: inline-block;
height: 16px;
text-decoration: none;
color: #fff;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
text-align: center;
text-transform: uppercase;
-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;
}
.amg3 a{
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0 #ffbecb;
}

02. Agora, copie o código abaixo e cole em seu gadget.

<div class="amg3"><a href="/" title="Título">Vaga</a></div>

Modelo 04: Cor escura que eu não sei o nome simples.

 

01. Copie o código do quote abaixo e cole acima de ]]></b:skin>

.amg4{
padding: 4px;
background: #e4c9dc;
border: 1px solid #cfa6c2;
box-shadow: inset 1px 1px 0 #efdeea;
margin-top: 2px
margin-left: 0px;
margin-right: 0px;
margin-bottom: 3px;
display: inline-block;
height: 16px;
text-decoration: none;
color: #fff;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
text-align: center;
text-transform: uppercase;
-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;
}
.amg4:hover{
background: #a67898;
border: 1px solid #966587;
box-shadow: inset 1px 1px 0 #a67898;
995c86
}
.amg4 a{
color: #fff;
text-decoration: none;
text-shadow: 0 1px 2px #cb9ebd;
}
.amg4 a:hover{
color: #fff;
text-decoration: none;
text-shadow: 0 1px 2px #995c86;
}

02. Agora, copie o código abaixo e cole em seu gadget.

<div class="amg4"><a href="/" title="Título">Vaga</a></div>