Discover Top Posts Tagged with #links hover

Estilos de link

Estilo 1

Código Css (<style>):

/** Estilo de link por Passo-html/Cavalhera **/ #ph-links a{color:#fff;} .ph-links {width:90px; margin:4px; text-align:center; display:inline-block; height:30px; line-height:30px; font-family:consolas; text-transform:uppercase; -moz-box-shadow:inset 0px 15px 0px #c7a5a5; -webkit-box-shadow:inset 0px 15px 0px #c7a5a5; box-shadow:inset 0px 15px 0px #c7a5a5; letter-spacing:1px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; background:#b58888;} .ph-links:hover {background:; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -moz-box-shadow:inset 0px -15px 0px #c7a5a5; -webkit-box-shadow:inset 0px -15px 0px #c7a5a5; box-shadow:inset 0px -15px 0px #c7a5a5;} /** Estilo de link por Passo-html/Cavalhera **/

Código Html (<body>)

<div id="ph-links"> <a class="ph-links" href="LINK">Home</a> <a class="ph-links" href="LINK">Design</a> <a class="ph-links" href="LINK">Partnes</a> <a class="ph-links" href="LINK">Themes</a> </div>

Estilo 2

Código Css (<style>)

/** Estilo de link por Passo-html/Cavalhera **/ #ph-links {margin:50px;} #ph-links a{color:#fff;} .ph-links {width:90px; margin:4px; text-align:center; display:inline-block; height:30px; line-height:30px; font-family:consolas; text-transform:uppercase; -moz-box-shadow:inset -75px 0px 0px #c7a5a5; -webkit-box-shadow:inset -75px 0px 0px #c7a5a5; box-shadow:inset -75px 0px 0px #c7a5a5; letter-spacing:1px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; background:#b58888;} .ph-links:hover {background:; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -moz-box-shadow:inset 75px 0px 0px #c7a5a5; -webkit-box-shadow:inset 75px 0px 0px #c7a5a5; box-shadow:inset 75px 0px 0px #c7a5a5;} /** Estilo de link por Passo-html/Cavalhera **/

Código Html (<body>)

<div id="ph-links2"> <a class="ph-links2" href="LINK">Home</a> <a class="ph-links2" href="LINK">Design</a> <a class="ph-links2" href="LINK">Partnes</a> <a class="ph-links2" href="LINK">Themes</a> </div>

Se usar, gostar, dê like.

Gabriela

#estilos de link #links hover #navigation links #nav links #links #link style #hover efect #passo-html #tumblr html

Efeito arco-íres usando CSS. (Na visualização faltou o acento, sorry.)

Veja online.

Cole isso no seu CSS (antes de </style>):

/* Encontrado em @passo-html */ #ph-links{position:relative; margin-left:auto; margin-right:auto; width:200px; display:inline;} #ph-links a{font-family:calibri; text-transform:uppercase; letter-spacing:1px; font-size:11px;} #ph-links a:hover{-webkit-animation:passo-html 1s infinite; -ms-animation:passo-html 1s infinite; -o-animation:passo-html 1s infinite; animation:passo-html 1s infinite;}

Cole isso no HTML (depois de body):

Cole isso antes de </head>

Se usar ou gostar dê like, é muito importante para nós. Beijo! /Gabi

#Efeito arco-íres usando CSS #links hover arco-íris #arco-íris links hover #links hover #efeitos em links #efeito arco iris usando css #efeito arco-iris hover usando css

Estilos de links

Visualize / Live demo

Código / Pastebin

Não remova os créditos ou teremos problemas. | Do not remove the credits or have problems.

/Gabi

#estilos de links #estilo de link #links hover #gabi #tutorial

Estilo de links para navegação

Código aqui e visualização aqui

Dê like ou reblog se gostar. /Carol

#estilo de links #estilos de link #links hover

Gradient Outline Header Links

1. find your header links coding in html - for most themes its: ul.titleLinks{

2. copy and paste this code under your header links coding

3. you can change the colours to your liking :)

#header links #links hover #links #codes #tutorials

Imagem Hover (com descrição, frase e links)

Bem, tava aqui sem fazer nada e resolvi fazer uma imagem hover, como sempre vejo a foto cm descrição hover, resolvi fazer com a descrição uma frase e links.

Preview

Cole esse código no seu css:

(x)

Cole esse código depois de <body>

(x)

Por Kauana | inspirar-r

Não reblog, nem repasse

Se usar dê like e credite

#descricao hover #frase hover #links hover #kakau

magnify links hover

http://freetexthost.com/vokvrt25xa

#codes #code #links #link #links hover #link hover #tutorial

Links Hover Effects

Rainbow links on hover:

Paste this code directly before </head>

(use Ctrl+F to find </head> in your html)

Spaced letters on hover:

Paste this code directly after <head>

(use Ctrl+F to find <head> in your html)

If you would like the word to be more spaced out when you hover, change 1px (the section boxed in the image below) to a higher number like 2px or 3px

Text Shadow on hover:

Paste this code directly directly after <head>

(use Ctrl+F to find <head> in your html)

To change the color of the shadow, change #000000 to a different color code from here.

*PLEASE LIKE THIS POST IF YOU FOUND IT HELPFUL*

#rainbow links #hover effects #links hover #letter spacing #text shadow #links shadow #shadow on hover #links effects #hover links #shadow text #shadow links #spaced letters #spaced letters hover #spaced out letters #html help #html blog #tuts #HTML Tutorial #tutorial blog

Estilos de link

Estilo 1

Código Css (<style>):

Código Html (<body>)

<div id="ph-links"> <a class="ph-links" href="LINK">Home</a> <a class="ph-links" href="LINK">Design</a> <a class="ph-links" href="LINK">Partnes</a> <a class="ph-links" href="LINK">Themes</a> </div>

Estilo 2

Código Css (<style>)

Código Html (<body>)

Se usar, gostar, dê like.

Gabriela

#estilos de link #links hover #navigation links #nav links #links #link style #hover efect #passo-html #tumblr html

#links hover

Trending Tags

Recently Viewed Tags

#links hover