Fox Games
Fox Games!.
Bem Vindo convidado, faça sua conta , e logue nela e faça parte dessa familia!.
Nova Comunidade de games que chegou para arrasar os fóruns!

[CSS]Estilos de Âncora

Ir em baixo

[CSS]Estilos de Âncora

Mensagem por Łazy™ em Qua Nov 28, 2012 7:28 pm

Olá,

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

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;
}
Demonstração: [Você precisa estar registrado e conectado para ver este link.]

OBS da Demonstração: A primeira âncora da Demonstração tem a classe "metro".
E a segunda âncora da Demonstração tem a classe "metro three-d", ou seja, são duas classes juntas.

Outro estilo de âncora mais moderno:

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);
}
Demonstração: [Você precisa estar registrado e conectado para ver este link.]

OBS da Demontração: A primeira âncora da Demonstração tem a classe "modern".
A segunda âncora da Demonstração tem a classe "modern embossed-link", ou seja, são duas classes juntas.
E a terceira âncora da Demonstração tem a classe "modern socle", ou seja, são duas classes juntas.

OBS Geral: Não criei os códigos, apenas peguei de um Site.

Cordialmente ...
avatar
Łazy™
Administração

Post's : 21

Pontos : 54447

Like's : 0

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum