Link hover com efeito de onda

Link hover com efeito de onda

Neste tutorial veremos como criar um link animado efeito de onda com Css e Html.

Nesta seção, projetaremos uma estrutura com a tag abaixo. 

Usaremos A Tag <a> para inserirmos o LINK de destino com as class com nome de link e com nome de onda, link_grafico e link_grafico_slide.

Essas tags usaremos para criar o nosso Link hover com efeito de onda com html e css.

Vamos Adicionar o HTML

     <a href="#" class="link onda">
       <span>Leia mais... </span>
       <svg class="link_grafico link_grafico_slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
       <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
       </svg>
     </a>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nosso  link com efeito de onda no texto com css e html.

.link {

    cursor: pointer;
    font-size: 18px;
    position: absolute;
    text-decoration: none;
    white-space: nowrap;
    color: #242424;
}

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

}

.link::before { content: ''; }

.onda {

    font-family: 'open_sansregular';
    overflow: hidden;
    padding: 7px 0;

}

.link_grafico {
    
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    fill: none;
    stroke: #000;
    stroke-width: 1px;

}

.link_grafico_slide {

    top: -3px;
    stroke-width: 2px;
    transition: transform 0.7s;
    transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);

}

.link:hover .link_grafico_slide {
    
    stroke: #38e2e5;
    transform: translate3d(-66.6%, 0, 0);

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando