EFEITO EM LINKS

Quer dar mais destaque aos links de suas páginas?
Um efeito muito comum é simular um 'rollover' simples, que é mudar a cor do fundo (background) e da fonte quando passar o mouse.

Passe o mouse aqui para ver o efeito rollover simples.


Procure deixar os links na cor original (azul) para não confundir o usuário. Mude somente as cores no efeito.
Código para inserir no seu html:

<style type="text/css">
a:hover {
background:#ff0;
color:#f00; 
}
</style>

No background você escolhe a cor do fundo do link e em color a cor da fonte.

NOTA: todos os links da página serão afetados.

Retirar sublinhado e mudar a cor do texto:

<style type="text/css">
a:link, a:visited {
text-decoration: none
}
a:hover {
text-decoration: underline;
color: #f00
}
a:active {
text-decoration: none
}
</style>

Tamanho fonte links:

<style type="text/css">
a:link, a:visited, a:active {
text-decoration: none;
}
a:hover {text-decoration: underline; 
color:#000;
font-size:150%;
}
</style>


Todos esses efeitos devem ser estudados com cuidado antes de serem inseridos no site, principalmente no que diz respeito a cor e ao sublinhado.

O usuário sabe que um texto ou palavra na cor azul significa que pode ser clicado, até minha mãe sabe disso!
Mudar isso poderá reduzir a usabilidade do site.

Quer mais efeitos? Que tal colocar textos em movimento?

COMENTÁRIOS

BLOGGER
Nome

Blogger,15,botão,2,Códigos html,5,comentários,4,Construtores online,1,Criar sites,39,Dados Estruturados,7,Dicas,18,Dicas úteis,22,Disqus,1,Disqus.,3,doação,1,domínio,6,Downloads,2,Facebook,1,Ferramentas grátis,14,flash,2,Fontes,2,Gifs animados,2,hospedagem,3,html,2,Informações,10,Monetização,4,nvu,2,pagseguro,2,Programas,10,Redes Sociais,8,SEO,6,site,10,Templates,3,Tutorial,5,Whatsapp,3,Wordpress,5,
ltr
item
Tutorial Para Criar Sites: EFEITO EM LINKS
EFEITO EM LINKS
De mais destaque ao site colocando efeitos em links. Um efeito muito simples de colocar é o rollover.
https://3.bp.blogspot.com/-vJ8RoOhlHoY/T1VJgK5WZJI/AAAAAAAAA1I/tzSO_xPLgFA/s1600/links.jpg
https://3.bp.blogspot.com/-vJ8RoOhlHoY/T1VJgK5WZJI/AAAAAAAAA1I/tzSO_xPLgFA/s72-c/links.jpg
Tutorial Para Criar Sites
https://www.tutorialparacriarsites.com.br/2012/03/efeito-em-links.html
https://www.tutorialparacriarsites.com.br/
https://www.tutorialparacriarsites.com.br/
https://www.tutorialparacriarsites.com.br/2012/03/efeito-em-links.html
true
1392597315444680805
UTF-8
Loaded All Posts Não há conteúdo relacionado para esta publicação Ver mais Continuar lendo Reply Cancel reply Delete By Home PAGES PÁGINAS Ver mais CONTEÚDO RELACIONADO RESULTADO PARA ARQUIVO PESQUISA TODAS AS NOTÍCIAS Ah! que pena. Sua pesquisa não encontrou nenhuma referência. Volte para a página inicial Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sab Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Mai Jun Jul Ago Set Out Nov Dez just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy