[Repostado]Estilos de Âncora

Boa Noite,

Irei passar aqui um código de personalização para Âncoras (<a>):

Âncoras:

Código:

.metro {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background: #08C;

  /* Font styles */
  color: white;
  font-weight: bold;
  text-decoration: none;
   
    font-family: "Lato", Calibri, Arial, sans-serif;
}

.metro:hover { background: #0AF; }

.metro.three-d {
  position: relative;
box-shadow: 1px 1px rgb(83, 167, 234), 2px 2px rgb(83, 167, 234), 3px 3px rgb(83, 167, 234);
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}

.metro.three-d:active {
  box-shadow: none;
  top: 3px;
  left: 3px;
}
            ​

Demo: http://jsfiddle.net/7ynRp/embedded/result/



Código:

Código:

.modern {
display: inline-block;
margin: 10px;
padding: 8px 15px;
background: rgb(184, 237, 1);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(0, 0, 0, 0.2);
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, 0.7);
    font-family: "Lato", Calibri, Arial, sans-serif;
font-weight: 700;
font-size: 16px;
    color: rgb(85, 85, 85);
}

.modern:hover  { background: #C7FE0A; }.embossed-link {
  box-shadow:
    inset 0 3px 2px rgba(255,255,255,.22),
    inset 0 -3px 2px rgba(0,0,0,.17),
    inset 0 20px 10px rgba(255,255,255,.12),
    0 0 4px 1px rgba(0,0,0,.1),
    0 3px 2px rgba(0,0,0,.2);
}

.modern.embossed-link {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(0,0,0,0.3),
    0 0 4px 1px rgba(0,0,0,0.2),
    inset 0 3px 2px rgba(255,255,255,.22),
    inset 0 -3px 2px rgba(0,0,0,.15),
    inset 0 20px 10px rgba(255,255,255,.12),
    0 0 4px 1px rgba(0,0,0,.1),
    0 3px 2px rgba(0,0,0,.2);
   
}

.modern.embossed-link:active {
  box-shadow:
    inset 0 -2px 1px rgba(255,255,255,0.2),
    inset 0 3px 2px rgba(0,0,0,0.12);
}

.socle {
  position: relative;
  boder:: 2;
}

.socle:after {
content: "";
boder:: -1;
position: absolute;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
top: -6px;
bottom: -6px;
right: -6px;
left: -6px;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), transparent);
background: -moz-linear-gradient(rgba(0, 0, 0, 0.1), transparent);
background: -o-linear-gradient(rgba(0, 0, 0, 0.1), transparent);
background: -ms-linear-gradient(rgba(0, 0, 0, 0.1), transparent);
background: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
}
​

Demo: http://jsfiddle.net/nEuC4/embedded/result/


Obs: Não fui eu que fiz esses códigos, eu apenas peguei de um site.

Olá eu gostava de usar a 2 opção mas só a 3 caixa. Dá para por isso á parte?

Obrigado.

Obrigado , irei ver se funfa