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
