Links Multicoloridos (Degradê)

Oi :3
Hoje vou mostrar para vocês como usar degradê nos links e deixá-los multicoloridos; é semelhante ao efeito arco-íris, que deixa os links em várias cores, proporcionado por um script, conforme já mostrei aqui:
O que muda é que no caso do degradê não é necessário nenhum script, o link não fica piscando e você ainda pode escolher as cores, basta mudar a:hover do seu modelo, seja ele dinâmico ou não. O resultado será um efeito como o da imagem abaixo:
Vamos lá!
Para modelos dinâmicos:
-Acrescente esse código no seu CSS (Modelo-Personalizar-Avançado-Adicionar CSS)
a { text-decoration: none; }
a:hover { -webkit-background-clip: text; color: white; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363)); background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
}
Depois clique em aplicar ao blog e veja como ficou.
Para todos os modelos:
-Acesse a área de edição de HTML do seu template e procure por: a:hover, como na imagem abaixo:

-Troque por:
a { text-decoration: none; }
a:hover { -webkit-background-clip: text; color: white; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363)); background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
}


-Ficando assim:
Visualize e se estiver tudo bem, salve ^-^ Você ainda pode trocar os códigos das cores (que vêm com um "#" na frente) por outras que goste.
Simples e fofo!!!
Espero que gostem e beijus<3
Fonte: Oloblogger

3 Comments

  1. Sidus30 julho

    Fica lindo.gostei.
    http://blogbondmais.blogspot.com.br/

    ResponderExcluir
  2. Curiosando26 setembro

    Coloquei no meu blog ficou lindo *_*

    Gosto muito do seu blog!
    aprendo bastante aqui, acho tudo tão fofo!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up