Tutorial: Cajita flotante con enlace

Que conejito tan sepsi ¬w¬

Hola muffins :3 traigo un tuto de una cajita flotante que te leva a un enlace! ·u· 

P·R·E·V·I·E·W

Debes colocar el código en un Gadget HTML/JavaScript

Código guapetón:

<style>
a:link, a:active, a:visited{
color: #ECC6FF;
text-decoration: none;
text-shadow:10px 0px transparent, -10px 0px transparent;
transition: all 0.9s ease;
-o-transition-transition: all 0.9s ease;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease
}
a:hover {
color:#E396FF;
text-shadow:0px 0px #E396FF, 0px 0px #E396FF;
transition: all 0.9s ease;
-o-transition-transition: all 0.9s ease;
-webkit-transition: all 0.9s ease;
-moz
}
#akina{width:250px; height:auto;}

}
#center{
padding-top:3px;
padding-bottom:3px;
position:fixed !important;
width:250px;
height:207px;
background-color:white;

}
body{
color:#aaaaaa;

}
{

font-family:amatic;


font-size:19px;

color: #d4f5ef;
font-size:15px;
z-index:1;
}
#credz{
width:auto;
position:fixed;
bottom:75px;
left:0px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#credzz{
font-size:12px;
font-family:arial;
line-height:16px;
text-align:center;
height:15px;
margin-top:33px;
width:5px;
padding:5px;
padding-right:10px;
background:#ffffff;
margin-left:0px;
position:fixed;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
border:1px solid #D78FFF;
}

#credzzz{
text-align:center;
width:100px;
font-size:10px;
background:#fff;
height:5px;
padding-top:10px;
padding-bottom:10px;
font-family:calibri;
text-transform:uppercase;
margin-left:-100px;
margin-top:33px;
position:fixed;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
border:1px solid #D78FFF;
line-height:5px;
}

#credz:hover #credzz{
margin-left:100px;
}

#credz:hover #credzzz{
margin-left:0px;
}

}


@font-face{font-family: 'lolol'; src: url('http://static.tumblr.com/hxu4bui/XBSmrubll/websymbols-regular.otf');
}
</style>

<div id="credz"><div id="credzz">©</div>
<div id="credzzz">
<a href="Link">Tu texto :3</a>
</div></div>
<div id="center">
<div id="content">
</div>
</div>
</div><div style="clear:both; padding-bottom:0.25em"></div>
</style>

Color del link 
Color del link hover 
Color del símbolo [©]

Tamaño y tipo de font 

Fondo de la cajita 

Color del borde 

Eso es todo, espero que les sirva ^-^

Post por: Gяιммγ

¿Te ha gustado esta entrada?

Sigueme en mis redes sociales para no preederte ninguna entrada Blogger | Google Plus
Contactame por e·mail kawaii.friki.chan@gmail.com