Link animado – Efeito Rabisco

Neste tutorial veja como criar um link animado com efeito Rabisco a lápis com Css e Html.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tag: <span>, <svg> e a tag <a> para inserirmos o endereço no link.

Essas tags usaremos para criar o nosso link animado com html e css.

Vamos Adicionar o HTML

  <a href="#" class="link link--rabisco">
     <span class="icon icon-pencil"> Leia mais</span>
     <svg class="link__grafico link__grafico--stroke link__grafico--scribble" width="100%" height="10" viewBox="0 0 101 9"><path d="M.426 1.973C4.144 1.567 17.77-.514 21.443 1.48 24.296 3.026 24.844 4.627 27.5 7c3.075 2.748 6.642-4.141 10.066-4.688 7.517-1.2 13.237 5.425 17.59 2.745C58.5 3 60.464-1.786 66 2c1.996 1.365 3.174 3.737 5.286 4.41 5.423 1.727 25.34-7.981 29.14-1.294" pathLength="1"/></svg>
  </a>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso link animado com efeito rabisco com css e html.

.link {

    cursor: pointer;
    font-size: 1em;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    color: #555555;

}

.link::before,
.link::after {
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link::before {
    content: '';
    /* show by default */
}

.link--rabisco {
    font-family: angie-sans, sans-serif;
    font-size: 1.25rem;
}

.link--rabisco::before {
    display: none;
}

.link__grafico {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    fill: none;
    stroke: #59d6db;
    stroke-width: 1px;
}

.link__grafico--stroke path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.link:hover .link__grafico--stroke path {
    stroke-dashoffset: 0;
}

.link__grafico--scribble {
    top: 100%;
}

.link__grafico--scribble path {
    transition: stroke-dashoffset 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

.link:hover .link__grafico--scribble path {
    transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
    transition-duration: 0.3s;
}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando