HTML
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);
}
}