HTML
<button class="botaoAnimado">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M1.444 6.669a2 2 0 0 0-.865 3.337l3.412 3.408V20h6.593l3.435 3.43a1.987 1.987 0 0 0 1.408.588 2.034 2.034 0 0 0 .51-.066 1.978 1.978 0 0 0 1.42-1.379L23.991.021ZM2 8.592l17.028-5.02L5.993 16.586v-4Zm13.44 13.424L11.413 18h-4L20.446 4.978Z" data-name="01 align center" fill="#ffffff" opacity="1" data-original="#000000" class=""></path></g></svg>
<p>ENVIAR</p>
</button>
CSS
.botaoAnimado{
padding: 14px 24px;
display: flex;
gap: 8px;
background: linear-gradient(130deg, blue, rgb(136, 0, 255),rgb(195, 10, 176));
background-size: 600%;
border: none;
border-radius: 12px;
box-shadow: 0px 0px 40px rgba(206, 150, 255, 0.179), 4px 4px 6px rgba(255, 255, 255, 0.293) inset, -4px -4px 6px rgba(255, 255, 255, 0.293) inset;
color: rgba(255, 255, 255, 0.831);
font-size: 16px;
letter-spacing: 1px;
animation: gradientAnimation 6s infinite;
animation-play-state: paused;
overflow: hidden;
cursor: pointer;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
.botaoAnimado p{
transition: all .5s;
margin: 0
}
.botaoAnimado svg{
transition: all .5s;
width: 20px;
height: 20px;
opacity: .8
}
.botaoAnimado:hover svg{
animation: flutuacao 2s infinite alternate;
margin-left: 40px;
margin-right: -40px;
animation-direction: alternate;
}
.botaoAnimado:hover{
animation-play-state: running;
}
.botaoAnimado:hover p{
transform: translateX(100px);
}
@keyframes gradientAnimation{
0%{background-position: 0%, 50%;}
50%{background-position: 100%, 50%;}
100%{background-position: 0%, 50%;}
}
@keyframes flutuacao{
0%{
transform: translateY(-4px) rotate(32deg);
}100%{
transform: translateY(8px) rotate(32deg);
}
}