Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

criar links

criar links

Criar links com efeitos especiais

Exemplo 1:Efeito quando o ponteiro está sobre o link

É comum a criação de efeitos diferentes quando o ponteiro do mouse está sobre o link. Veremos a seguir alguns exemplos extras de estilização da pseudo-classe :hover para criar links mais interessantes e com um visual moderno e profissional.

Exemplo 1a: Criar links com  espaçamento entre as letras:

Como você deve estar lembrado da lição anterior, o espaçamento entre as letras de um texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicado aos links para obter um efeito interessante:

Digite o código abaixo, quando eu digo para digitar, estou pedindo para não copiar e colar, pois se você quer realmente aprender este negócio de css  você deve fazer tudo da forma correta, digitando todos os códigos em editor html  que pode ser o Notepad + +, salvar o arquivo dentro da pasta certa, neste cado você salvará este arquivo como estilo.css e depois abrir no seu navegador para verificar o resultado, caso o resultado não seja o esperado, deve-se identificar o que está errado e tetar até que fique certo. Seja um profissional, criativo e dedicado, não seja um destes preguiçoso que acham que negócios online, é negócio que dá dinheiro sem trabalhar. É preciso se dedicar. Por isso digite o código abaixo para você aprender como se faz:

a:hover {
letter-spacing: 10px; /* define o espaço entre as letras quando ponteiro do mouse estiver sobre o link */
font-weight:bold; /* define a fonte quando o ponteiro do mouse estiver sobre o link*/
color:red; /* define a cor do links quando o ponteiro do mouse estiver sobre ele */
}

 

Agora digite o código abaixo e salve no arquivo index.html:

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/>
</head>
<body>
<a href=”http://www.criarnegociosonline.com”>Link Visitado</a><br>
<a href=”http://www.seusite.com”>Link Não Visitado</a>
</body>
</html>

Veja a imagem como ficará após rodar em seu navegador, veja que as letras do link ficaram mais afastadas quando o ponteiro do mouse ficou sobre o link :

criar links

 

Exemplo 1b: UPPERCASE e lowercase

Na lição anterior vimos a propriedade text-transform, para estilizar com letras maiúsculas e minúsculas. Este recurso também pose ser usado para criar links personalizados e estilizar, veja:

Digite e salve o código abaixo no arquivo estilo.css:

a:hover {
text-transform: uppercase; /* coloca todas as letras do link em maiúsculo quando o ponteiro do mouse estiver sobre ele.*/
font-weight:bold; /* define a fonte do link quando o ponteiro do mouse estiver sobre ele */
color:blue; /* define a cor do link quando o ponteiro do mouse estiver sobre ele*/
background-color:yellow; /* define a cor de fundo do link quando o ponteiro do mouse estiver sobre ele*/
}

 

Digite e salve o código abaixo no arquivo index.html:

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/>
</head>
<body>
<a href=”http://www.criarnegociosonline.com”>Link Visitado</a><br>
<a href=”http://www.seusite.com”>Link Não Visitado</a>
</body>
</html>

Veja como fica a imagem quando for renderizado (rodado) no seu navegador:

 

criar links 2

 

 

Exemplo 2: Removendo sublinhado dos links

Uma pergunta comum: Como remover o sublinhado dos links?

Você deve estudar com muito cuidado a necessidade de retirar o sublinhado dos links, pois isto poderá reduzir significativamente a usabilidade do website. As pessoas estão acostumadas com links na cor azul e sublinhados e sabem que ali há um texto a ser clicado. Se você muda a cor e retira o sublinhado dos links, poderá confundir seus visitantes e em conseqüência não retirar o máximo de proveiro dos conteúdos do seu website.

Feita esta ressalva, é muito fácil retirar o sublinhado dos links. Conforme explicado na lição anterior, a propriedade text-decoration pode ser usada para definir se o texto é ou não sublinhado. Para remover o sublinhado, basta definir o valor none para a propriedade text-decoration.

Digite o código abaixo e salve no arquivo estilo.css

a {
text-decoration:none; /* retirar o sublinhado do texto do link */
}

Digite o códiio abaixo e salve no arquivo index.html:

 

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/>
</head>
<body>
<a href=”http://www.criarsites.com.br”>Link Visitado</a><br>
<a href=”http://www.sitepx.com”>Link Não Visitado</a>
</body>
</html>

Veja imagem abaixo como ficará depois de renderizado no navegador:

 

criar links 3

 

 

Alternativamente, para criar links você também pode definir text-decoration juntamente com outras propriedades para as quatro pseudo-classes.

Digite o código abaixo e salve no arquivo estilo.css:

a:link {
color: blue; /* cor do texto do link */ 
text-decoration:none; /* texto do link sem soblinhamento*/
}
a:visited {
color: purple; /* cor do texto do link depois de ser visitado*/
text-decoration:none; /* texto do link sem sublinhamento*/
}
a:active {
background-color: yellow; /* cor de fundo do texto quando clicado*/
text-decoration:none; /* texto sem sublinhamento*/
}
a:hover {
color:red; /* cor do texto link quando o ponteiro do mouse estiver sobre ele */
text-decoration:none; /* texto dem sublinhamento */
}

Digite o código abaixo e salve no arquivo.html:

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/>
</head>
<body>
<a href=”http://www.crirnegociosonline.com”>Link Visitado</a><br>
<a href=”http://www.seusite.com.br”>Link Não Visitado</a><br>
<a href=”http://www.seusite.com.br”>Link Não Visitado</a>
</body>
</html>

A imagem ficará assim:

criar links 4

 

Viu como é fácil criar links! Agora volte a nossa página inicial de estudo sobre CSS e passe ao próximo estudo.

voltar

   

 

 

 

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.