<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<style>
* {font-family:Arial}
.link a {position: relative;color:Blue;}
.link svg {
left:-4px;
top:-8px;
position: absolute;
}
.link circle {
display: block;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: .066em;
stroke-dasharray: 290;
stroke-dashoffset: 290;
transition: stroke-dashoffset ease-out 0.5s;
fill: none;
stroke: #aaa;
}
.link a:hover circle {stroke-dashoffset: 0;}
</style>
</head>
<body>
<br>
<div class='link'>
pulsa <a href="#">aquí<svg width="40" height="40"><circle cx="20" cy="20" r="19"></circle></svg></a>
</div>
<p> </p>
<div class='link'>
pulsa <a href="#">aquí<svg width="40" height="40"><circle cx="20" cy="20" r="19"></circle></svg></a>
</div>
</body>
</html>
Comentarios sobre la versión: Versión 1.0 (1)