Links Multi-Cor

Como fazer o enfeito multi-cor em links:hover

Funcionalidade: Links com Enfeito Multi-Cor
Plataformas: Blogger, Worpress, WebSite, Etc.
Dificuldade de Implementação: Baixa
Exemplo de Implementação: Nos Links

Ver Exemplo


Implementar no Blogger:

Passo 1 - Abrir o painel principal do Blogger.
Passo 2 - Entrar na zona do HTML do Blogger; Modelo > Editar HTML.
Passo 3 - Procurar na zona do CSS por: ]]></b:skin>.
Passo 4 - Antes desta colar o código abaixo, (Caixa CSS).
Passo 5 - Alterar os links onde se deseja o efeito;
Passo 5a - Procurar pelos links que devem começar por; <a e substituir toda a linha pela que está abaixo (Caixa HTML) fazendo as alterações respectivas.
Passo 6 - guardar Modelo e verificar se está tudo bem, caso exista algum problema verifique se efectuo todos os passos, caso seja necessário repita todos os passos.


Implementar num WebSite:

Passo 1 - Editar a página do CSS e colocar o código abaixo (Caixa CSS).
Passo 2 - Editar o Html do website.
Passo 3 - Procurar pelos links onde se deseja colocar o efeito e que devem começar por; <a...></a> e substituir toda a linha pela que está abaixo (Caixa HTML), fazendo as alterações respectivas.
Passo 4 - Salvar e verificar se está tudo bem, caso exista algum problema verifique se efectuo todos os passos, caso seja necessário repetir todos os passos.

<span class="colors-links"><a href="#">Aqui o texto!</a></span>

span.colors-links{
  display: inline-block;
  text-align: center;
  color: white;
}
span.colors-links:hover {
  background: -moz-linear-gradient(left, red 0%, #ff5d00 6%, #ffbb00 12%, #e5ff00 18%, #88ff00 24%, #2aff00 30%, #00ff33 36%, #00ff90 42%, #00ffe9 48%, #00bbff 54%, #005dff 60%, blue 66%, #5d00ff 72%, #bb00ff 78%, #ff00e5 84%, #ff0083 90%, #ff003f 95%, #ff0004 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, red), color-stop(6%, #ff5d00), color-stop(12%, #ffbb00), color-stop(18%, #e5ff00), color-stop(24%, #88ff00), color-stop(30%, #2aff00), color-stop(36%, #00ff33), color-stop(42%, #00ff90), color-stop(48%, #00ffe9), color-stop(54%, #00bbff), color-stop(60%, #005dff), color-stop(66%, blue), color-stop(72%, #5d00ff), color-stop(78%, #bb00ff), color-stop(84%, #ff00e5), color-stop(90%, #ff0083), color-stop(95%, #ff003f), color-stop(100%, #ff0004));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, red 0%, #ff5d00 6%, #ffbb00 12%, #e5ff00 18%, #88ff00 24%, #2aff00 30%, #00ff33 36%, #00ff90 42%, #00ffe9 48%, #00bbff 54%, #005dff 60%, blue 66%, #5d00ff 72%, #bb00ff 78%, #ff00e5 84%, #ff0083 90%, #ff003f 95%, #ff0004 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, red 0%, #ff5d00 6%, #ffbb00 12%, #e5ff00 18%, #88ff00 24%, #2aff00 30%, #00ff33 36%, #00ff90 42%, #00ffe9 48%, #00bbff 54%, #005dff 60%, blue 66%, #5d00ff 72%, #bb00ff 78%, #ff00e5 84%, #ff0083 90%, #ff003f 95%, #ff0004 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, red 0%, #ff5d00 6%, #ffbb00 12%, #e5ff00 18%, #88ff00 24%, #2aff00 30%, #00ff33 36%, #00ff90 42%, #00ffe9 48%, #00bbff 54%, #005dff 60%, blue 66%, #5d00ff 72%, #bb00ff 78%, #ff00e5 84%, #ff0083 90%, #ff003f 95%, #ff0004 100%);
  /* IE10+ */
  background: linear-gradient(to right, #ff0000 0%, #ff5d00 6%, #ffbb00 12%, #e5ff00 18%, #88ff00 24%, #2aff00 30%, #00ff33 36%, #00ff90 42%, #00ffe9 48%, #00bbff 54%, #005dff 60%, #0000ff 66%, #5d00ff 72%, #bb00ff 78%, #ff00e5 84%, #ff0083 90%, #ff003f 95%, #ff0004 100%);
  /* W3C */
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -o-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-animation: hover 5s infinite linear;
  -moz-animation: hover 5s infinite linear;
  -o-animation: hover 5s infinite linear;
  animation: hover 5s infinite linear;
}

@-webkit-keyframes "hover" {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

@-moz-keyframes hover {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

@-o-keyframes "hover" {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

@keyframes "hover" {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 1000px 0;
  }
}